Chapter 3. Managing State

#2 State 구조 선택

학습 목차

1. state 구조화 원칙
2. 관련 state 그룹화하기
3. state의 모순을 피하기
4. 불필요한 state를 피하기
5. state 중복을 피하기
6. 깊게 중첩된 state는 피하기

---

1. state 구조화 원칙

• 어떤 state를 보유하는 컴포넌트를 작성할 때엔 얼마나 많은 state 변수를 사용할지, 데이터의 모양은 어떻게 할지에 대해 선택해야 한다.
  최적화되지 않은 state 구조를 사용하더라도 올바른 프로그램을 작성할 수 있지만, 더 나은 선택을 할 수 있도록 안내하는 몇 가지 원칙이 있다.
  1. 관련 state를 그룹화한다.
     항상 두 개 이상의 state 변수를 동시에 업데이트하는 경우 단일 state 변수로 병합하는 것이 좋다.
  2. state의 모순을 피하라.
     여러 state 조각이 서로 모순되거나 ‘불일치’할 수 있는 방식으로 state를 구성하면 실수가 발생할 여지가 생긴다. 이를 피하자.
  3. 불필요한 state를 피하라.
     렌더링 중에 컴포넌트의 props나 기존 state 변수에서 일부 정보를 계산할 수 있다면 해당 정보를 해당 컴포넌트의 state에 넣지 않아야 한다.
  4. state 중복을 피하라.
     동일한 데이터가 여러 state 변수 간에 또는 중첩된 객체 내에 중복되면 동기화 state를 유지하기가 어렵다. 가능하면 중복을 줄이자.
  5. 깊게 중첩된 state는 피하라.
     깊게 계층화된 state는 업데이트하기 쉽지 않다.
     가능하면 state를 평평한 방식으로 구성하는 것이 좋다.
• 이러한 원칙의 목표는 실수 없이 state를 쉽게 업데이트할 수 있도록 하는 것이다.
  state에서 불필요하거나 중복된 데이터를 제거하면 모든 데이터가 동기화 상태를 유지하는 데 도움이 된다.
  이는 데이터베이스 엔지니어가 버그 발생 가능성을 줄이기 위해 데이터베이스 구조를 ‘정규화’하는 것과 유사하다.
  • 알버트 아인슈타인의 말을 빌리자면,
    “state를 최대한 단순하게 만들되, 그보다 더 단순해서는 안 된다.”

2. 관련 state 그룹화하기

• 단일 state 변수를 사용할지 다중 state 변수를 사용할지 고민할 때가 있다.

  • 아래처럼 할까?

   const [x, setX] = useState(0);
   const [y, setY] = useState(0);

  • 아니면 이렇게 할까?
    const [position, setPosition] = useState({ x: 0, y: 0 });

• 기술적으로는 이 두 가지 접근 방식 중 하나를 사용할 수 있다.
  하지만 두 개의 state 변수가 항상 함께 변경되는 경우에는 하나의 state 변수로 통합하는 것이 좋다.

• 그러면 항상 동기화 상태를 유지하는 것을 잊지 않을 수 있다.

• 데이터를 객체나 배열로 그룹화하는 또 다른 경우는 필요한 state의 조각 수를 모를 때이다.
  예를 들어, 사용자가 사용자 정의 필드를 추가할 수 있는 양식이 있을 때 유용하다.

! 주의 !

• state 변수가 객체인 경우 다른 필드를 명시적으로 복사하지 않고는 그 안의 한 필드만 업데이트할 수는 없다는 점을 기억하라.

3. state의 모순을 피하기

• 컴포넌트가 복잡할수록 무슨 일이 일어났는지 파악하기가 더 어려워진다.
  - 공홈 코드 참고하자

4. 불필요한 state를 피하기

• 렌더링 중에 컴포넌트의 props나 기존 state 변수에서 일부 정보를 계산할 수 있는 경우 해당 정보를 컴포넌트의 state에 넣지 않아야 한다.
  - 공홈 코드 참고하자

5. state 중복을 피하기

• 항목 자체에 대한 정보가 두 곳에 중복되기 떄문에 state 변수에 객체로 저장되면 좋지 않다.
  - 공홈 코드 참고하자

6. 깊게 중첩된 state는 피하기

• state가 너무 깊게 중첩되어 업데이트하기 어려운 경우 “flat”(“정규화”라고도 함)하게 만드는 것을 고려해 보라.
• state를 원하는 만큼 중첩할 수 있지만 “flat”하게 만들면 많은 문제를 해결할 수 있다.
  state를 더 쉽게 업데이트할 수 있고 중첩된 객체의 다른 부분에 중복이 생기지 않도록 할 수 있다.
• 때로는 중첩된 state의 일부를 하위 컴포넌트로 이동하여 state 중첩을 줄일 수도 있다.
  이 방법은 항목에 마우스 커서가 있는지 여부와 같이 저장할 필요가 없는 임시 UI state에 적합하다.
  - 공홈 코드 참고하자

---

요약

• 두 개의 state 변수가 항상 함께 업데이트되는 경우 두 변수를 하나로 병합하는 것이 좋다.
• state 변수를 신중하게 선택하여 ‘불가능한’ state를 만들지 않도록 하자.
• state를 업데이트할 때 실수할 가능성을 줄이는 방식으로 state를 구성하라.
• 동기화 state를 유지할 필요가 없도록 불필요 및 중복 state를 피하자.
• 특별히 업데이트를 막으려는 경우가 아니라면 props를 state에 넣지 말자.
• 선택과 같은 UI 패턴의 경우 객체 자체 대신 ID 또는 인덱스를 state로 유지한다.
• 깊게 중첩된 state를 업데이트하는 것이 복잡하다면 state를 평평하게 만들어 보자.

---

React 공식 문서

https://react.dev/

React 비공식 번역 문서

https://react-ko.dev/

MDN

https://developer.mozilla.org/ko/

Wikipedia

https://ko.wikipedia.org/wiki/