[React] DOM 요소에서 key 값의 중요성

React DOM 요소에서 반복되는 요소에 key값을 넣어주는게 렌더링에서 효율적이다.

아래의 예제로 확인해보자!

if(flag){
    return(
        <div>
            <p>사과</p>
            <p>바나나</p>
        </div>
    );
} else {
    return(
        <div>
            <p>사과</p>
            <p>파인애플</p>
            <p>바나나</p>
        </div>
    );
}

위와 같이 flag 조건에 따른 렌더링을 할 때 리액트는 이전의 돔과 비교해서 다른 점을 렌더링해주는 특징이 있다.

이전 돔과 비교할 때 순서를 기준으로 비교한다.

즉, 사과 바나나 순서에서 사과 파인애플 바나나 순서로 비교해서 

따라서 위와 같이 조건에 따라 변한다면 파인애플과 바나나가 새로 렌더링된다.

 

하지만!

우리 입장에서는 파인애플만 추가된건데 굳이 바나나까지 새로 렌더링 된다면 비효율적이다! 

(물론 예제처럼 몇 안되는 돔 요소면 성능 차이는 없겠지만 복잡한 연산의 렌더링일 경우 비효율적이다)

이 때 key 값을 넣어준다.

if(flag){
    return(
        <div>
            <p key="apple">사과</p>
            <p key="banana">바나나</p>
        </div>
    );
} else {
    return(
        <div>
            <p key="apple">사과</p>
            <p key="pineapple">파인애플</p>
            <p key="banana">바나나</p>
        </div>
    );
}

key값을 넣어주면 리액트는 순서를 기준으로 비교하는 것이 아니라 key값을 기준으로 비교하여 렌더링을 한다.

따라서, 'pineapple' 키 값만 추가됐으므로 파인애플만 새로 렌더링한다.