[moin-review] 2021-11-08

Facts

• 국가별, 송금방법별 form 분기처리
• 공통 이름 input 생성

Findings

• redux 를 사용하지 않고 관심사 분리를 하다보면 단점이 prop drilling 이 생겨버린다.
• Prop Drilling (kentcdodds.com)
• Application State Management with React (kentcdodds.com)
• prop drilling 을 그나마 줄이려면 prop 을 받아서 하위컴포넌트에 전달하기 보다 애초에 children 으로 prop 을 받던가 하위컴포넌트에 prop 을 할당한 것을
  prop 으로 받던가 하면 된다.

before

function App() {
  const [someState, setSomeState] = React.useState('some state')
  return (
    <>
      <Header someState={someState} onStateChange={setSomeState} />
      <LeftNav someState={someState} onStateChange={setSomeState} />
      <MainContent someState={someState} onStateChange={setSomeState} />
    </>
  )
}

after

function App() {
  const [someState, setSomeState] = React.useState('some state')
  return (
    <>
      <Header
        logo={<Logo someState={someState} />}
        settings={<Settings onStateChange={setSomeState} />}
      />
      <LeftNav>
        <SomeLink someState={someState} />
        <SomeOtherLink someState={someState} />
        <Etc someState={someState} />
      </LeftNav>
      <MainContent>
        <SomeSensibleComponent someState={someState} />
        <AndSoOn someState={someState} />
      </MainContent>
    </>
  )
}

Feelings

좋음이 있으면 싫음이 생기듯이 특정 패턴이든 방법론이든 100% 장점만 있는 경우는 없다.

전역으로 사용하지 않는 상태라고 생각해서 redux 로 관리하지 않았는데

관심사 분리를 위해 컴포넌트를 잘게 분리하는 과정에서 해당 prop 을 사용하지 않는데도 컴포넌트를 통해 prop 을 내려보내야 하는 경우가 발생했다.

만약 redux 를 사용했다면 실제 상태를 사용하는 컴포넌트에서 store 에 접근해서 받아와서 굳이 상태를 중간단계를 거처셔 전달하는 일이 없었을 것이다.

One of the reasons redux was so successful was the fact that react-redux solved the prop drilling problem
by Kent C. Dodds

하지만 prop drilling 하기 싫다고 redux 를 사용하게 되면 전역상태가 아닌 개나소나 모든 상태를 redux store 에서 관리하게 된다.

그나마 prop drilling 을 줄이려면 하위 컴포넌트를 children 으로 받아서

prop 전달없이 부모 컴포넌트 호출할 때 같이 넘기는 걸로 하면 2~3 depth 정도는 확 줄일 수 있다는 걸 발견했다.