공식문서 읽기: Tutoiral
톺아보기
컴포넌트
각 컴포넌트에 저장된 state는 독립적이다.
* 동일한 컴포넌트를 재사용하면 state가 공유될 것이라는 내 생각과 달리, 컴포넌트별로 독립적인 state를 가진다는 점을 알게 됨.다수의 자식 컴포넌트에서 데이터를 수집하거나, 두 개의 자식 컴포넌트가 서로의 state를 공유하도록 하려면 부모 컴포넌트에서 state를 선언하여 props down하자.
* 부모 컴포넌트로 state를 옮기는 방법은 리팩토링에서도 자주 쓰인다!
* 부모 컴포넌트에서 state를 선언하면 자식 컴포넌트별로 직접 state를 관리하는 번거로움을 던다.컴포넌트의 이벤트 함수에 인자를 전달해야 하는 경우, 이벤트 함수가 바로 호출되지 않도록 함수 내부에서 정의된 형태로 등록한다.
* 함수가 바로 호출되면 무한 루프에 빠질 수 있음에 유의하자.
리액트의 Immutability
리액트에서 데이터는 Immutability(불변성)를 유지한다.
* 이전 상태와 비교하여 변경된 부분만 업데이트하여 효율적인 렌더링을 추구할 수 있다.불변성을 이용하여 데이터를 재사용할 수 있다..
* 직접적인 데이터 변형을 피하면 이전 데이터를 그대로 유지하여 나중에 재사용할 수 있다.
* memo API를 이용하여 React가 컴포넌트를 다시 렌더링할 시점을 선택할 수 있다.
리액트의 Key
리액트는 목록 데이터를 업데이트할 때 각 목록 요소를 구별할 수 있는 key가 필요하다.
* 리액트는 리렌더링할 때 이전 목록의 key값을 비교하여 달라진 점을 판별하고 삭제, 변경하는 방식으로 동작한다.
* 동적 목록을 작성할 때마다 key를 할당하는 것이 권장된다!배열 index를 key값으로 설정하는건 가급적 지양하자
* 목록을 다시 정렬하거나 요소를 삽입/제거할 때 배열 index가 달라지기 때문이다.
* 삭제되거나, 수정될 우려가 있는 값은 key로 사용하는 것을 지양해야 한다.
* 평소, 적절한 key값이 없으면 map 메서드에서 index를 추출해서 key로 지정하는 습관이 있었는데 고치자.
리액트의 state
- 중복 state를 피하자.
* state를 관리하다보면, 서로 연관된 state가 존재할 수 있다. state A를 토대로 state B를 알 수 있다면, 굳이 A, B를 모두 관리하여 불필요한 중복과 버그 위험성을 높일 필요가 없다.
고찰
그동안 목록 데이터에 key값을 부여할 때, ‘리액트는 목록 데이터에 반드시 key값을 부여해야 인식한다.’ 정도로만 알고 key를 지정해왔었다. 이번 정독으로 리액트가 key를 이용하여 렌더링하는 원리를 파악했고, 삭제, 수정될 위험이 있는 배열 index는 key로 적절하지 않다는 점을 새롭게 배웠다. 기본 작동 원리를 알고 사용해야 함을 새삼 깨우쳤다.