[리액트(React) 학습자를 위한 기초지식] 반복문, 리스트를 위한 Key 설정

리액트(React) 학습에 필요한 기초지식

반복문, 리스트를 위한 Key 설정

Key는 웹 브라우저 화면에서 보이지 않는, 그래서 DOM이 그려주는 화면 표시와는 관계없는 요소입니다. 하지만 제대로 된 리액트 컴포넌트를 작성하기 위해 중요한 요소입니다.

리액트는 앞에서 설명한 Props나 State만 컨트롤하여, 실제로 변경이 발생한 표시 요소만 다시 화면에 나타내는 기능이 라이브러리로 준비되어 있습니다.

이때 Key의 역할은 다시 화면을 표시할 때 쓸데없는 동작을 최소화하여 성능 저하를 방지하는데 있습니다. Key를 이해하려면 반복 처리로 리스트를 표시하는 UI를 보면 알기 쉬우므로 리스트 화면 표시를 예로 설명하겠습니다.

//배열 형태의 데이터

const animal = [

'Tiger', 'Lion', 'Cat', 'Dog'

]

//화면에 표시할 DOM

<ul>

<li>Tiger</li>

<li>Lion</li>

<li>Cat</li>

<li>Dog</li>

</ul>

위 예제처럼 표시용 배열 데이터를 사용한 DOM 화면 포시를 예로 들겠습니다. 나중에 이 리스트에 'Rabbit'을 추가하는 경우를 생각해 봅시다. 단순히 마지막에 추가했을 때는 특별히 기존 3개 데이터의 위치를 변경할 필요가 없으므로 4번째 항목만 달라질 대상이 됩니다. 자세히 설명하자면 'Tiger'는 0번째, 'Lion'은 1번째, 'Cat'은 2번째, 'Dog'는 3번째로 <ul> 내 <li>의 표시 순서는 달라지지 않기 때문입니다. 그렇다면 'Tiger' 앞에 'Rabbit'을 추가하면 어떻게 될까요?

<ul>

<li>Tiger</li>

<li>Lion</li>

<li>Cat</li>

<li>Dog</li>

+ <li>Rabbit</li> //맨 앞에 추가할거야

</ul>

맨 앞에 'Rabbit'을 추가한다면, 'Tiger'는 0번째에서 1번째로 바뀌고, 'Lion'은 1번째에서 2번째로 바뀌고 이렇게 순서가 하나씩 밀리게 됩니다. 아래 코드처럼 고작 1개의 list를 추가했는데, DOM 구조적으로 모든 데이터가 꼬이고(?) 바뀌게 되므로 리액트가 다시 표시해야 할 대상이 급격하게 늘어나게 됩니다.

<ul>

- <li>Tiger</li>

- <li>Lion</li>

- <li>Cat</li>

- <li>Dog</li>

+ <li>Rabbit</li>

+ <li>Tiger</li>

+ <li>Lion</li>

+ <li>Cat</li>

+ <li>Dog</li>

</ul>

이를 피하고자 key를 이용하여 더 효율적으로 컴포넌트를 작성합니다. 각 요소(여기에서는 <li>)에 대해 구분자로 key를 붙이면 리액트는 렌더링 실행 시 구분자를 이용하여 가장 효율적인 화면 표시를 수행합니다.

key 사용법은 간단합니다. JSX에서 key 이름으로 값을 지정해두면 내부적으로 key를 저장하고, 데이터 변경으로 인해 기존 DOM과의 차이를 감지할 때 이를 사용합니다. key를 설정하지 않으면 브라우저의 개발자도구에 있는 콘솔창에 경고메세지가 나오므로 이를 참고해 지정하면 됩니다.

<참조>

1. 이시바시 케이타. ⌜더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드⌟. 구멍가게 코딩단, 안동현(옮김). 프리렉, 2019