언제 지역 상태를 사용할까?

<aside> 💡

30p. “base가 싱글턴일 경우 재사용성이 떨어지기 때문에" js에서 global 변수는 기본적으로 고유하기 때문에 옮긴이가 말했듯 싱글턴 변수로 볼 수 있다. (굳이) 여기서 재사용에 방점을 찍고 고민을 해보면 좋을 듯 한데, 흔히 React 개발자가 이야기하는 재사용성이라 한다면 공통 컴포넌트의 분리를 떠오르기 쉽다. 여러 컴포넌트에서 동일한 내용이 있다면, 해당 내용을 컴포넌트로 분리하여 다양한 컴포넌트에서 재사용할 수 있도록 계층을 추가하는 것이다. 그런 의미에서 위 문장을 해석한다면 어색하기 짝이 없다. 기본적으로, (Next에서의 Server Component등을 제외하면) Component는 window에 대한 접근권한이 있기 때문에 전역변수를 가져올 수도, 사용할 수도 있다. 다만, 여기서 이야기하는 재사용성이 떨어진다는 재사용할 수 없다의 의미보단 재사용할 시 따르는 의험이 크다로 해석하면 더 자연스러운듯 한데 관심이 있다면 이 토론을 읽어보자. 그렇다면 ‘싱글톤 패턴이 항상 나쁜 것인가?’ 즉 ‘반드시 DI 패턴을 사용해서 유연성을 확보해야 하는가?’(= React 컴포넌트에선 prop으로 치환될 수 있겠다.) 란 의문을 가질 수 있는데, 여기 React 환경에서 싱글톤을 사용하는 흥미로운 시도가 있다. 이 글에서 저자는 Theme의 관리를 위해 컨텍스트로 React APP을 Wrappingg하고 Theme와 관련된 비즈니스 로직을 담당하는 인스턴스를 하나만 설계하도록 했다. 충분히 합리적이고 타당하다. 비단 Theme뿐만 아니라, 우리가 사용할 수 있는 여러 전역설정들도 이에 응용할 수 있을 것이다. 어쩌면, 이미 싱글톤으로 만들었을 수도 있다. 다만 그러한 패턴이 싱글톤이었는지 몰랐을 뿐,

</aside>

const AddBase = ({ number }) => {
  const [base, changeBase] = useState(1);
  return <div>{number + base}</div>;
};

useState가 포함된 AddBase 함수안에서만 state의 setter(changeBase)를 사용할 수 있고, 다른 함수에서 base에 접근할 수 있다. 고로 이 컴포넌트는 억제되어 있고 지역성이 보장되며 이는 적절한 사용법이다.

<aside> 💡

당연한 말을 참 어렵게도 한다.

</aside>

지역 상태를 효과적으로 사용하는 방법

<aside> 💡

예전에 국비과정 강사로 있었을 때 수강생 중 한명이 react에서 state의 setter를 자식에게 prop으로 전달하여 자식이 이 함수를 사용하여 state의 값을 변경하는 행위를 왜 “상태 끌어올리기”라고 표현하는지를 물어본적이 있다. 그 수강생의 표현을 빌리자면, 어차피 state의 getter와 setter는 다 parent에 있는데, 그냥 setter를 자식에게 주어서 부모의 값이 바뀐게 아니냐고. 즉, 끌어올린다는 행위 자체가 없지 않냐나는 것인데, 맞는 말인 것 같다. 사실 이런 것처럼 영어로 된 표현을 한글로 직역하면서 어색해지는 경우가 많은 것 같다.

</aside>

state와 무관한 영역(컴포넌트)이 있을 때, 이를 단순히 자식 컴포넌트를 사용하는 것처럼 사용한다면 useState의 state값이 변경함에 따라 불필요한 리랜더링이 발생함. 저자는 이를 해결하기 위해 컴포넌트를 prop으로 전달하거나 react의 children문법을 소개해주고 있음.