17화: Choosing the State Structure

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

참새들. Unsplash 에 Will Bolding 님이 올림

공식 문서

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

Choosing the State Structure – React

상태 구조를 짜는 원칙

• 실수 없이 상태 변경을 손쉽게 하고, 유지 보수에 용이하게 만들기 위함
• “Make your state as simple as it can be—but no simpler.”

1. 연관된 상태들을 묶기

• 만약 몇 개의 상태들이 동시에 바뀐다면, 하나의 상태로 합치는 걸 추천
• 두 개 중 까먹고 하나만 바꾸는 등의 실수를 줄일 수 있음
• 정확히 몇 개의 상태가 필요한지 모른다면 배열이나 객체로 묶는 게 좋음
• 객체나 배열을 상태로 사용할 경우 변형(mutate)이 아니라 교체(replace)할 것

2. 모순된 상태 피하기

• 두 가지 이상의 상태 조합에서 절대로 일어나서는 안 되는 조합이 존재하는 경우 하나로 합칠 것
• 바꿔야 하는 여러 상태 중 까먹고 하나만 바꾸는 등의 실수를 줄일 수 있음

3. 불필요한 상태 피하기

• 렌더링 도중에 props나 다른 상태로부터 충분히 계산 가능한 값들은 상태로 쓰지 않기
• props를 상태로 미러링하지 말기
  • props를 useState에 넣을 경우 컴포넌트 초기 렌더링에만 적용됨 -> 이후 props가 바뀌어도 상태가 변하지 않음
  • 만약 해당 props를 초기화에만 사용할 것이 분명하다면 해도 됨

4. 복제된 상태 피하기

• 어떤 상태의 일부를 복사해서 사용하지 않기: 원본이 바뀌면 복사본은 바뀌지 않음
• 대신 어떤 상태에서 원하는 부분을 찾을 수 있는 단서(예: index, id, ...)를 상태로 저장하기

5. 너무 깊은 중첩 상태 피하기

• 중첩 상태의 일부를 바꾸려면 해당 부분뿐만 아니라 부모들까지 싹 바꿔줘야 함
• 중헙 상태를 flat하게 바꿀 수 있는지(또는 정규화할 수 있는지) 생각해보기
• 중첩 상태의 일부를 자식 컴포넌트가 저장하게 하는 방법으로 피할 수도 있음