리액트 - 리액트 배열

리액트에서의 배열 특징

자바스크립트에서 배열을 다뤄보신분이라면 그냥 배열에 데이터를 추가할 때, push 를 사용하지만

리액트에서는 state 내부의 값을 직접적으로 수정하면 절대로 안된다.

이를 불변성 유지 라고 하는데, 이전에 나는 이것을 모르고 push를 통해서 수정한 적이 있다.

push, splice, unshift, pop 같은 자바스크립트 내장함수는 배열 자체를 직접 수정하게 되므로 리액트에서는 적절하지 않고 concat, slice, map, filter 같은 함수를 사용해야 한다.

불변성 유지가 중요한 이유는 불변성을 유지해야, 리액트에서 모든것들이 필요한 상황에 리렌더링 되도록 설계 할 수 있고, 그렇게 해야 나중에 성능도 최적화 할 수 있기 때문이다.

(출처: https://velopert.com/3636)

컴포넌트 내부에서 필요한 값 중에서, 렌더링 되는것과 상관이 없는것들은 굳이 state 에 넣어줄 필요가 없다.

컴포넌트를 여러개 렌더링 하기 위해서는 자바스크립트 배열의 내장함수인 map 을 사용하면 된다.

key 는 리액트에서 배열을 렌더링을 할 때 꼭 필요한 값

리액트는 배열을 렌더링 할 때 값을 통하여 업데이트 성능을 최적화함

만약에 key 를 부여하지 않으면, 배열의 index 값이 자동으로 key 로 설정이되는데

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

중간에 끼워넣는다고 했을때, 배열의 index 를 key 로 사용하게되어 중간에 값이 들어가면 index 도 함께 바뀌어 버리게 되니, X 아래로 값이 다 바뀌게 된다.

<div key={0}>A</div>
<div key={1}>B</div>
<div key={2}>X</div> [C -> X]
<div key={3}>D -> C</div> [D -> C]
<div key={4}>D</div> [새로 생성됨]

key 를 배열의 index 값으로 사용하는게 아니라, 우리가 데이터를 추가 할 때마다 고정적인 고유 값을 부여해주면, 리액트가 변화를 감지해내고 업데이트를 하게 될 떄 조금 더 똑똑하게 처리 할 수 있게된다.

<div key={0}>A</div>
<div key={1}>B</div>
<div key={5}>X</div> [새로 생성됨]
<div key={2}>C</div> [유지됨]
<div key={3}>D</div> [유지됨]

새로운 DOM 은 하나만 생성되고, 나머지는 그대로 유지된다..

그렇기에 key 값은 언제나 고유해야한다.

우리가 데이터베이스에 데이터를 추가하면 주로 해당 데이터를 가르키는 고유 id 가 있다.

그러한 데이터를 리액트에서 렌더링하게된다면 그 고유 id 를 가지고 key 로 사용하면 된다.

데이터에 고유 값이 없을 수 도 있다. 그럴 때에는 만약에 key 값을 빼먹으면 렌더링이 되긴 하지만 개발자도구 콘솔에서 경고창이 뜨게 된다. 만약에 그 경고가 보고싶지 않다면 다음과 같이 작업 할 수 있다.

const list = data.map(
      (info, index) => (<PhoneInfo key={index} info={info}/>)
    );