어플리케이션이 커짐에 따라 state가 어떻게 구성되는지, 데이터가 컴포넌트간에 어떻게 흐르는지 파악하면 도움이 된다. 불필요하거나 중복된 state는 버그의 흔한 원인입니다.
State를 사용해 input 다루기
선언형 ui와 명령형 ui 비교
명령형 : ui를 조작하기 위해 발생한 상황에 따라 정확한 지침을 작성
선연형 : 무엇(ui)을 보여주고 싶은지 선언
UI를 선언적인 방식으로 생각하기
- 컴포넌트의 다양한 시각적 state를 확인
- 무엇이 state 변화를 트리거하는지 확인
휴먼인풋(버튼, 입력, 링크이동 등), 컴퓨터 인풋(네트워크 응답, 타임아웃, 이미지로딩) - useState를 사용해서 메모리의 state를 표현
useState를 통해 시각적 state를 표현 - 불필요한 state 변수를 제거
- state 설정을 위해 이벤트 핸들러를 연결
State 구조 선택하기
State 구조화 원칙
- 연관된 State 그룹화하기
두개의 state 변수가 항상 함께 변경된다면, 단일 state 변수로 통합 - State의 모순 피하기
- 불필요한 State 피하기
기존 state와 props에서 일부 정보를 계산할 수 있다면 state를 새로 만들지 않는다. - State의 중복 피하기
- 깊게 중첩된 State 피하기
쉽게 업데이트하기에 중첩되어 있다면, 평탄하게 구조를 변경
컴포넌트간 state 공유하기
state 끌어올리기 : 각 컴포넌트에서 state를 제거하고 가장 가까운 공통 부모 컴포넌트로 옮긴 후 props로 전달
공통 부모의 state에서 설정된 값은 props를 전달받는 자식 컴포넌트에서 동일한 값이 표시된다.
State를 보존하고 초기화하기
리렌더링마다 언제 state를 보존하고 또 state를 초기화할지 컨트롤할 수 있습니다.
컴포넌트가 독립된 state를 가진다면 같은 컴포넌트를 여러번 렌더링 해도 각각의 state는 독립적입니다. React가 컴포넌트를 제거하면 그 state도 같이 제거를 하기 때문에 제거 전 값을 저장하지 않습니다.
보이지 않게 설정하면 이전 값을 유지한채 컴포넌트가 삭제된 것처럼 구현할 수 있음
React는 UI트리의 구조를 기준으로 state를 보존하거나 초기화합니다.
State 로직을 reducer로 작성하기
한 컴포넌트에서 state 업데이트가 여러 이벤트 핸들러로 분산되는 경우가 있습니다. 이런 경우 컴포넌트를 관리하기 어려워집니다. reducer로 state를 업데이트하는 모든 로직을 관리하여 단일함수로 통합해 관리 가능합니다.
useState 와 useReducer 언제 사용해야 할까?
reducer를 사용하면 useState만 사용할 때부터 코드의 양이 증가합니다. useReducer는 reducer함수, action을 전달하는 부분 둘다 작성해야되기 때문입니다.
이벤트 핸들러가 많아지는 경우에 reducer를 사용하는 것이 현명합니다.
state에서 간단한 state업데이트는 가독성이 좋지만, 복잡한 state구조를 가지면 코드 양이 많아져 가독성이 떨어집니다. useReducer를 사요하여, 로직의 동작과, 이벤트 핸들러를 통해서 무엇이 발생했는지 구분하는 것이 좋습니다.
useReducer는 콘솔로그를 통해 어떤 action에서 에러가 발생했는지 추적하기 용이해집니다.
reducer는 컴포넌트에 의존하지 않는 순수 함수입니다. reducer를 독립적으로 분리하거나, 테스트를 할 수 있습니다.
useState와 useReducer는 동일한 방식이기 때문에 언제나 상호변환이 가능합니다. 코드의 양과 가독성을 고려하여 적절한 방식을 사용하면 됩니다.
reducer는 순수하게!
state 업데이트 함수와 비슷하게, reducer는 렌더링 중에 실행됩니다. reducer는 입력값이 값다면 결과 값도 항상 같아야합니다 즉 순수성을 유지해야합니다.
Context를 사용해 데이터를 깊게 전달하기
리액트는 부모컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달합니다. 그러나 자식이 많은 경우에 propDrilling이 발생합니다. 이런 경우 Context를통해 명시적으로 props을 통해 전달하지 않고도 사용가능합니다.
상위 컴포넌트에서 Context를 정의하면, 중간 컴포넌트를 통하지 않고 말단 컴포넌트에서 값을 가져 올 수 있습니다.
