[React] 공식문서가 알려주는 state 구조 잘 짜는 방법

state 구조화 5원칙

• 관련된 state를 그룹화하기
• state 안에서 모순 피하기
• 불필요한 state 피하기
• 중복된 state 피하기
• 깊게 중첩된 state는 피하기

연관된 state 그룹화

const [position, setPosition] = useState({x:0, y:0}

x값과 y값을 분리해서 state로 처리하지 않고 그룹화한다. 커서를 움직일때 동시에 x, y값이 움직여야하는 상황에서 필요하다. ⇒ 동시에 업데이트 해야하는 state에선 그룹화 하기! ⇒ 단, x값 따로 y 값따로 업데이트하려면 …로 복사를 해주지 않으면 불가능하다.

state 안에서 모순을 피하자

isSending, isSent와 같은 단계적으로 변하는 연관된 state의 경우 하나라도 업데이트를 하는 것을 까먹는다면 isSending과 isSent가 둘다 true가 되는 모순이 생길 수 있다.

⇒ 이럴땐 그냥 [status, setStatus] 하나로 묶어서 const isSending = status === ‘sending’; 과 같은 조건식을 상수화 시켜서 관리하자. ⇒ state가 아니므로 관리가 훨씬 쉽다.

불필요한 state를 피하자

계산해서 나타낼수 있는 값은 계산해서 나타내기

firstName과 lastName을 입력하는 input에서 값을 조합해서 나타낼 수 있는 fullName을 굳이 state로 관리하지 않는다.

Props를 state에 미러링 하지 마라

function Message({ messageColor }) {
  const [color, setColor] = useState(messageColor);

위의 코드에서 부모에서 전달받은 messageColor는 color의 초기값으로 설정될 뿐, 나중에 부모에서 messageColor가 이후에 바뀌어서 전달해도 state가 업데이트 되지 않는다.

⇒ messageColor prop을 직접 사용해야한다.

function Message({ messageColor }) {
  const color = messageColor;

이렇게 하면 부모에서 전달된 prop도 지속적으로 싱크가 맞춰진다(= 동기화 된다)

중복된 state 피하자

• items = [{ id: 0, title: 'pretzels'}, ...]

이런 식으로 정의된 아이템을 선택할 때는 selectedItem = {id: 0, title: 'pretzels'} 대신 selectedId = 0 유니크한 정보값 하나로 선택해서 관리한다.

⇒ 선택과 같은 UI 패턴의 경우, 객체 자체가 아닌 ID 또는 인덱스를 state에 유지하자.

깊게 중첩된 state 피하자

state가 너무 중첩되어 있다면, flat 하게 만드는 것을 고려하자.

⇒ state가 너무 중첩된 child를 갖고 있을 때, flat(=”nomalized”)하게 편 후에 업데이트 하는 것이 더 쉽다.

⇒ 메모리 사용량 개선을 위해선 삭제된 항목을 filter하기위해서 Immer를 사용하자



출처 : 
Choosing the State Structure 파트를 읽고 기억해놔야할 중요 사실만 정리해두었다 

https://react.dev/learn/choosing-the-state-structure

Choosing the State Structure – React