Redux

컴포넌트와 상태를 분리해 전역에서 상태관리를 해줄 수 있게 해주는 라이브러리

• 상태 동적으로 표현되는 데이터
• Side Effect 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인

상태는 로컬/전역으로 나뉜다.
컴포넌트 내에서만 영향을 끼치는 상태는 로컬이다. 다른 컴포넌트와 데이터를 공유하지 않기 때문에 form은 대부분 로컬이라 볼 수 있다.
다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태는 전역이다. 데이터 로딩도 전역상태로 보면 될 것 같다.

무결성을 위해 동일한 데이터는 동일한 곳에서 데이터를 가지고 와야 한다.

다른 컴포넌트가 같은 상태를 필요로 한다면 전역에 저장해 사용하는 것이 좋다.

언제쓰냐면...
라이트모드/다크모드, 언어설정, redo/undo

상태관리를 라이브러리를 통해 함으로서

1. 전역 상태 저장소 제공
2. Props drilling 문제 해결
   이 가능하게 된다. 상태관리 라이브러리는 필수로 사용하는 것은 아니고 필요할때 사용하면 된다.

Props drilling

리액트에서 props는 위에서 아래로 흐른다. 부모가 갖고 있는 데이터를 자손의 자손이 필요로 한다면 부모의 바로 아래 자손은 자신이 그 데이터를 쓰는지 안쓰는지 여부와는 상관없이 그 아래 자손을 위해 props를 넘겨받아야한다.
props를 넘기기 위해 전달만을 위한 컴포넌트를 중간에 삽입하기도 한다. 이정도만 봐도 문제가 있겠구나, 쓸데없이 코드가 복잡해지겠구나 싶다.

가독성이 나빠지는 것은 물론, 유지보수가 힘들어질 것이고 state가 변경되면 props 전달책이 된 컴포넌트들 또한 쓸데없이 리렌더링을 하게 될 것이다. 웹 성능에 좋지 않을거라는 건 자명하다..

export default function App() {
  const [num, setNum] = useState(1);

  const plus = () => { setNum(num + 1) }
  const minus = () => { setNum(num - 1) }
  return (
    <Container>
        //button 클릭해 상태를 변경한다.
      <Quantity>{`수량 : ${num}`}</Quantity>
      <Child1 plus={plus} minus={minus} /> //props전달
    </Container>
  );
}

function Child1({ plus,  minus }) { //props전달
  return (
    <Container>
      <Child2 plus={plus} minus={minus} /> //props전달
    </Container>
  );
}

function Child2({ plus, minus }) { //props전달
  return (
    <Container>
      <Button onClick={plus}>👍</Button>
      <Button onClick={minus}>👎</Button>
    </Container>
  );
}