list, key

다수의 컴포넌트 렌더링

const numbers = [<div>1111</div>,<div>2222</div>];

엘리먼트들이 담긴 리스트를 만들고

ReactDOM.render(
    <div>{numbers}</div>,
    document.querySelector('#root')
);

렌더링하면 보는 바와 같이 여러개의 컴포넌트를 렌더링 할 수 있다

리스트를 출력하는 컴포넌트

function List(props){
    const words = props.words;

    const wordList = words.map(v=>
        <li>{v}</li>
    )
    return <ul>
        {wordList}
    </ul>
}

const arrWords = ['hello','world','i','am','react'];

ReactDOM.render(
    <List words={arrWords}/>,
    document.querySelector('#root')
);

RenderList 컴포넌트는 배열을 받아와서 unordered list로 렌더링해준다

출력은 정상적으로 되지만 key가 없다고 에러가 나는 것을 볼 수 있다

key

key는 엘리먼트 리스트를 생성할 때 포함해야하는 문자열 어트리뷰트이며 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다 고 튜토리얼에서 설명하고 있다

const wordList = words.map((v,i)=>
    <li key={i}>{v}</li>
)

각 엘리먼트의 인덱스를 키로 설정해준 코드이다

이렇게 해주면 에러는 사라지게 되지만 배열의 인덱스로 키를 설정하는 것은 권장하지 않는다

---

우리는 이미 리액트가 돔트리를 업데이트 할 때 바뀌는 부분만 업데이트 하는 것을 알고 있는데

리스트로 예를 들어보자

'일번 엘리먼트'
'이번 엘리먼트'

가 돔트리에 구성이 되어있는 상태에서 삼번 엘리먼트가 아래로 추가된다면

'일번 엘리먼트'
'이번 엘리먼트'
------------- 이 윗부분은 동일하다고 간주되어서 건드리지 않고
'삼번 엘리먼트' <--- 이부분만 업데이트가 된다

하지만 위로 엘리먼트가 추가된다면

'삼번 엘리먼트'
'일번 엘리먼트'
'이번 엘리먼트'

이 트리는 전부 다른 트리로 인식하게 되어서 전부 다시 렌더링하게되는데 매우 비효율적이다

이럴 경우에 대비해서 우리는 각 엘리먼트에 key를 할당해주는데

일 - '일번 엘리먼트'
이 - '이번 엘리먼트'

여기에 첫번째 엘리먼트를 추가하고 나머지 엘리먼트를 밀어보자

삼 - '삼번 엘리먼트'
일 - '일번 엘리먼트'
이 - '이번 엘리먼트'

일번과 이번은 이미 이전에 가지고 있었던 일,이 key가 동일하기 때문에 삼번 엘리먼트만 업데이트 한다

리액트 내부에서 key가 이런식으로 작동하고 있기 때문에 key를 index로 설정하는 것을 권장하지 않는데

리스트를 생성할 때 마다 인덱스를 키로 설정해주면 이러한 이점을 볼 수 없기 때문

---