리액트 state colocation

next 프로젝트 강의를 들으면서 react-hook-form을 사용하게 되어 react-hook-form에 대해 알아보다

여러 블로그를 다니다 react-hook-form 은 react 렌더링 관련 최적화와 깊은 관련이 있는 것 같았다.

그러다 눈에 들어온 것이 colocation이라는 단어였다.

 

Coloctaion의 의미?

colocation의 원리는 코드를 최대한 그것과 연관 있는 곳에 배치하는 것이다.
최대한 영향이 가는 부분을 최소화한다는 개념이라고 한다.

코드양이 점점 늘어나게 되면  의존성을 관리하는 것이 점점 어려워질 수 있으니,

주석이나 css 등  코드들을 관련 있는 것끼리 모아놓는 것을 뜻하는 것 같다.

 

Colocation 원문 :

https://kentcdodds.com/blog/colocation

Colocation

 

State-Colocation 또 뭐지?

 state가 최상위 컴포넌트 트리에 있다면, 리액트는 어떤 것이 바뀌었는지 모르기 때문에 모든 컴포넌트에서 DOM의 업데이트
여부를 체크해야만 한다. 하지만 state를 최대한 업데이트와? 연관 있는 컴포넌트에 배치한다면, 리액트는 체크할 것이 적어진다.

예시로 input 요소가 여러 개일 때, 한 input의 유효성 상태 변경 때문에 모든 컴포넌트가 리렌더링 될 필요는 없다.
때문에 리렌더링이 필요한 컴포넌트만 분리하여, 리렌더링 되는 범위를 좁히는 방법이 많이 쓰인다고 한다.

 

해당 input 태그의  Email, Name, Password들을 관리할 컴포넌트들을 분리해서

관련 State와 State 를 변경시킬 로직을 해당 컴포너트에서 구성하는 것이다.

 

이렇게 작성을하게 되면 해당 Input에 텍스트를 입력했을 때 다른 컴포넌트들은 렌더링 되지 않고, 해당 input에 텍스트를 입력했을 때 

해당 컴포넌트만 렌더링되게 된다! State-Colocation 방식을 따르게 된 것

 

하지만 이때 다른컴포넌트들에서도 해당 컴포넌트들에 값이 필요하여 props를 넘겨줘야 한다면  어떻게 해야 할까

unction DogName({ time }) {
  const [dog, setDog] = React.useState("");
  return (
    <div>
      <DogInput dog={dog} onChange={setDog} />
      <DogFavoriteNumberDisplay time={time} dog={dog} />
    </div>
  );
}
function DogInput({ dog, onChange }) {
  return (
    <>
      <label htmlFor="dog">Dog Name</label>
      <br />
      <input id="dog" value={dog} onChange={e => onChange(e.target.value)} />
    </>
  );
}
function DogFavoriteNumberDisplay({ time, dog }) {
  return (
    <p>{dog ? `${dog}'s favorite number is ${time}.` : "enter a dog name"}</p>
  );
}

이 케이스에서는 DogInput 컴포넌트로 state를 옮길 수 없게 된다, 왜냐하면 DogFavoriteNumberDisplay는
그 state에 접근이 필요하고, 따라서 우리는 이 두 개의 컴포넌트의 최소한의 부모를 찾아 위로 배치시키게 되는데

state가 여러 개의 컴포넌트에 의해 접근되어야 하는 case에도 동일하다. 
prop drilling을 피하기 위해 context API 나 상태관리 툴을 통해  관리할 수 도 있지만,
react 애플리케이션 속도를 저하시키는 주요 원인 중 하나는 전역 상태, 특히 변화하는 다양성이며.
context provider 안의 값들을 관련 있는 값들만 넣어어야 colocation 관점에서 효과를 얻을 수 있는 방법이기 때문이다.

원문에서는 context의 provider가 application의 react tree의 상단에 위치할 수 있지만,
모든 것이 그럴 필요는 없다는 것이며. state를 가장 알맞은 곳에 배치시키는 것이 좋고 그렇게 되면

UI interaction만 신경 쓰면 되고 속도도 더 빨라질 것이다라고 말한다.

 

state-colocation 원문 링크 :

https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster

https://kentcdodds.com/blog/application-state-management-with-react

 

원문이 영어로 되어있고 양도 생각보다 많아 내가 이해한 건지 모호한 부분이 많다?..

react-hook-form을 공부하려다 좀 이상한 길로 빠진 느낌이 있지만? React 상태관리에 대해서 다시 한번 생각하게 되는

시간이었다.  최적화에 대해 관심이 많은데 useCallback, useMemo 사용하여 최적화하는 방법에 대해서만 알고 있었지

이런 생각은 전혀 못했었던 것 같고 상태관리 툴에 대해서 그냥 사용하면 좋다고만 생각하고 있어서 안일했다는 생각이 든다 

 

참고블로그 : https://tech.inflab.com/202207-rallit-form-refactoring/react-hook-form/