7화: Rendering Lists

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash의 derek braithwaite 님 사진

공식 문서

https://react.dev/learn/rendering-lists#why-does-react-need-keys

Rendering Lists – React

배열의 정보를 렌더링하기

• 인터페이스를 만들 때 다른 정보(data)를 담은 여러 개의 컴포넌트를 렌더링하고 싶을 때 사용 가능
• 정보를 자바스크립트 객체나 배열에 담아 map 과 filter 같은 것들을 써서 렌더링

1. 데이터를 배열에 넣기
2. map 을 이용해서 배열의 정보들을 JSX 노드로 바꾼 새로운 배열 만들기
3. 2번에서 만든 배열을 <ul>{2번에서만든배열}</ul> 처럼 감싸서 반환하기

특정 정보만 필터링해서 보여주기

위 배열 정보 렌더링하기랑 같은데 2번에서 JSX 배열로 바꾸기 전에 필터링한 배열을 만들어주면 된다.

key prop을 이용해서 배열 요소를 정리하기

• key는 해당 배열의 다른 요소들과 자신을 구별짓는 유일한 문자열이나 숫자 값.
• map() 안에서 직접 선언되는 JSX element들은 항상 key가 필요
• 리액트는 key를 이용해 각 배열 요소가 어떤 컴포넌트에 해당하는지 찾는 걸 도와줌: 배열 요소의 삽입, 삭제, 정렬 등 순서가 바뀔 때 중요한 역할을 함
• 잘 고른 key 값은 리액트가 정확히 어디가 바뀌었는지 찾는 걸 도와줘서 DOM tree update를 정확하게 할 수 있도록 함
• map() 에서 리턴하는 DOM node가 여러개라면 <Fragment> 로 감싸서 여기에 key를 주면 됨
• key는 개발자가 컴포넌트 내부에서 props를 통해 읽을 수 없음.

key 이쁘게 고르는 법

• 데이터베이스에서 값을 받아오는 경우: 데이터베이스에서의 해당 값의 key나 id처럼 유일할 수밖에 없는 값 활용
• 로컬에서 자체 제작하는 값들인 경우: increment counter, crypto.randomUUID(), uuid 패키지 등을 사용

key 규칙

• 트리의 형제자매들끼리는 서로 유일해야 함.
• key값은 변해서는 안 됨

도대체 왜 key를 써야 하는데

• key는 형제자매들 사이에서 누가 누군지 구별할 수 있게 함
• 재배열로 인해서 위치가 바뀌더라도 key를 이용하면 리액트가 해당 컴포넌트가 죽을 때까지 추적할 수 있음

배열의 index를 key로 하면 안 되나요?

• key를 명시해주지 않으면 자동적으로 index를 key로 사용
• 삽입, 삭제, 정렬 등으로 배열의 순서가 바뀌면 문제 발생 가능
• 비슷한 이유로 Math.random() 으로 key를 주면 항상 key가 다르니까 모든 컴포넌트와 DOM이 매번 재생성됨

사실 공식 문서에서는 내 컴퓨터 파일의 순서를 에시로 설명한다. 근데 개인적으로 이건 설명력이 부족하다고 생각한다. 느낌은 알겠는데, 구체적인 예시가 없으니 아쉽다. 도대체 왜 이렇게 대충 넘어가나 했는데 공식 문서에서는 아직 리액트 컴포넌트의 상태(state)에 대해서 말한 적이 없다. 리액트를 공식 문서를 통해 처음 배운다면 state 얘기를 해도 모를 테니 어물쩡 넘어간 것 같다. 공식 문서를 잘 만들었다면 뒤에서도 언급이 있을 테니 여기서는 짧게만 이야기하는 게 좋아 보인다.

 

배열의 index를 key로 했을 때의 대표적인 버그는 상태에 관한 것이다.

 

앞서 공식 문서 읽기 6화에서 한 줄로 넘어간 내용이다.

리액트 컴포넌트의 상태는 JSX가 기억하는 게 아니라 리액트가 UI 트리에서 컴포넌트의 위치를 이용해 기억해준다.

 

배열을 이용해서 만드는 JSX는 일반적으로 형제자매끼리 형태가 같다.
순서가 바뀌어도 사실 트리가 보기에는 같은 위치에 같은 컴포넌트가 있다고 치는 게 아닐까? 따라서 기존의 state를 유지한다. 트리 상 컴포넌트의 위치는 바뀌지 않았으니까.
그래서 key를 index로 하면 상태 값이 꼬일 수 있다.

 

백문이 불여일견. 이건 구 리액트 공식 문서의 예제를 직접 돌려 보는 걸 추천한다.

두 경우 다 'Add New to Start' 버튼을 몇 번 누르고 input에 글자 좀 써 준 다음에 'Sort' 하면 뭐가 문제인지는 한 번에 보일 것이다.

• key를 index로 했을 경우
• key를 잘 만들었을 경우