[React] Derived State

웹 애플리케이션을 만들 때 어려운 것 중 하나가 상태관리이다. 

이번에 Derived State ( 파생 상태 )라고 불리는 것에 대해서 공부할 계획이다. 

 

Derived State ? 

파생 상태라는 것은 최소한의 데이터를 저장하게 끔 상태를 관리하는 방식이다. 

즉, 상태를 최소화 한다는 것이다. 

 

계산할 수 있는 상태에 대해서는 저장하지 않고 계산을 통해 변경 사항이 발생하면 

동기화 하는 방식으로 관리한다. 

 

실제 예 

출처 - https://isamatov.com/react-derived-state/

각 노래에 대해서 체크박스로 구성된 노래 선택기가 있다고 생각해보자. 

이러한 노래는 장르별로 그룹화가 되어있다. 

 

그 이유는 개별 노래를 선택할 수 있고 장르를 선택하면 모든 노래가 선택되길 희망한다. 

이런 형식의 페이지를 우리가 개발하다보면 쉽게 접할 수 있다. 

 

이것을 만들기 위해서 가장 첫번째로 생각하는 방식으론 두 개의 상태를 만드는 것이다. 

하나는 선택한 노래를 저장하고 있고 하나는 선택한 장르를 가지고 있다. 

 

하지만 여기서 상태를 2개 사용해야 할까? 

출처 - https://isamatov.com/react-derived-state/

여기서 제시하는 방식은 상태를 songSelections 하나만 가지고 있다. 

그리고 장르에 대한 상태를 변수를 통해서 즉석으로 계산하고 있다. 

const isGenreChecked = (genre, songSelections) => 
    OPTIONS[genre].every((song) => songSelections[song]);

every 함수를 사용해서 해당 장르의 모든 노래가 선택되었는지 확인해서 Boolean 값을 넘겨준다. 

 

const handleSelectGenre = (genre) => {
  return (e) => {
    const newSongSelections = { ...songSelections };
    OPTIONS[genre].forEach(song => (newSongSelections[song] = e.target.checked));
    
    setSongSelctions(newSongSelections);
  }
}

그리고 장르를 선택했을 경우 선택한 장르의 checked 상태에 따라 포함된 노래의 상태를 변경해주고 있다. 

 

왜 사용해야 할까? 

상태는 최소한으로 가지고 있는 것이 관리가 편하다. 

 

또한 단일 상태에 파생되어 다른 변수들이 동기화가 된다면 데이터를 추적하고 동기화하는 것이 간편해진다. 

 

예를들어, 하나의 장르가 선택되었을 경우 모든 노래도 선택되어 있을 것이다. 

여기서 하나의 노래를 선택 취소하면 장르 상태도 같이 변경하는 것과 자동으로 장르 상태가 변경되는 것 중

뭐가 더 간단할까? 

 

간단하게 말해서 노래 상태에 따라 장르가 파생된 변수( isGenreChecked )로 관리 된다면 노래가 변경되었을 때

굳이 장르의 상태를 변경하는 코드를 작성할 필요가 없어진다. 

 

좀 더 잘 사용하기 

파생된 변수는 상태로 구성 되어있는 것이 아닌 의존하고 있는 상태에 따라 계산한 값이 된다. 

그러므로 의존하고 있는 상태가 변경될 때 뿐만아니라 다른 상태가 변경되었을 때도 계산하게 된다. 

 

이것이 성능 상 오버헤드가 많이 발생한다면, useMemo를 사용해서 결과 값을 가지고 있을 수 있다. 

 

출처 

https://isamatov.com/react-derived-state/

Derived state - Underrated Pro tip for simplifying React state management