React 공식문서
1.UI 표현하기
1.7 리스트 렌더링
1.즉석에서 key를 만들기 보다는, 데이터 안에 key를 포함해야 한다.
2.서버데이터 => DB의 PK, 로컬데이터 => uuid 같은 패키지를 사용.
- 리액트는 키를 사용하지 않으면 배열의 인덱스를 사용 한다.
- key={Math.random()}처럼 즉석에서 key를 생성하지 말기, 모든 컴포넌트와 DOM이 매번 다시 생성 및 내부 상태 손실.
- 자식 컴포넌트 배열이 정적인 경우라면 index를 사용해도 좋다.
- 단, 혹시라도 자식 컴포넌트 중 state가 관리된다면 예기치 못한 버그가 생길것이다.
3.State 관리하기
3.4 State를 보존하고 초기화하기 : 리액트 상태 랜더 트리의 위치(자리)가 중요하다.
📌 리액트에서 key란?
- 리액트 엘리먼트가 고유함을 식별하는데 사용, 재생성 대신 리렌더링, 생명주기 유지로 DOM 효율적 업데이트.
- *React는 당신이 반환하는 컴포넌트 트리를 기준으로 본다.
- 부모 안에서의 순서 변경은 다른 컴포넌트로 본다.
1.같은 위치의 같은 컴포넌트는 state를 보존한다.
- 예) 컴포넌트 트리는 유지한 채로 state만 변경하는 경우 = 카운터
2.같은 위치의 다른 컴포넌트는 state를 초기화 한다.
- 예) 카운터를 show, hide하는 경우 카운터 내부 state는 초기화.
- 컴포넌트 함수를 중첩해서 정의하면 안 되는 이유입니다.
- 컴포넌트 내 컴포넌트를 만든다 = 매번 다른 컴포넌트를 생성한다. 라는 의미이다.
- 중첩 컴포넌트는 매번 라이프싸이클을 다시 시작한다.
3.같은 위치의 다른 key를 가진 컴포넌트는 state를 초기화 한다.
- props가 변경되는것은 리랜더링의 대상이지, 컴포넌트 재생성을 위해서는 key를 변경해야 한다.
4.부모의 자식의 컴포넌트 리스트는 렌더링이 최적화 된다.
- 4.1 key가 없는경우, 자식 컴포넌트 리스트의 위치기반으로 리렌더링 된다.
- 4.2 key가 있는경우, 자식 컴포넌트 리스트의 key가 동일하면 상태를 보존해준다.
- 4.3 key가 있는경우, 자식 컴포넌트 리스트의 key가 다르다면 상태를 독립적으로 관리해준다.
📌 챌린지 도전 - 2 (https://ko.react.dev/learn/preserving-and-resetting-state)
- 현상 : input필드의 상태는 유지되면서, label만 변경되고 있다.
- 즉, label 상태만 리렌더링되고 input 컴포넌트와 state는 유지되는 중. (모든 컴포넌트가 리렌더)
Case1. 순서를 변경해도 label만 변경되는 경우.
Case2. 순서를 변경해도 input이 유지되는 경우.
Case3. 순서를 변경해도 input이 초기화되는 경우.
📌 챌린지 도전 - 5 (https://ko.react.dev/learn/preserving-and-resetting-state)
- 이슈 : key를 index로 사용해서 문제가 발생하는 경우.
- 해결 : key값을 email로 설정하여 독립적인 state 관리 단위를 만들자.
📌 Uncontrolled Components
- React 리렌더링을 안하면서, 많은 form을 관리해야 하는 경우 응용가능하다.
- 초기값 : defaultValue, defaultChecked 를 사용.
- Get Input Value : ref를 이용해서 입력값들을 수집한다.