TIL DAY.33 [React] Redux 공부하기

2차 프로젝트를 마무리하면서 어느정도 React의 상태관리에 대해서 감이 잡히기 시작했다. 하지만 복잡한 기능을 만들수록 컴포넌트들을 많아지고 상태관리가 복잡해지기 시작했다.하지만 이런 복잡한 상태관리를 좀 더 편하게 만들어 줄 Redux라는 전역 상태 관리 라이브러리가 있다는 걸 알게 되었다. 그렇다면 Redux를 사용하는 방법에 대해서 알아보도록 하자.

👀 그렇다면 리덕스, 왜쓸까?

리덕스는 상태관리를 좀 더 편하게 하기 위한 라이브러리다. 예를 들어 다음과 같은 구조의 프로젝트가 있다고 가정해보자.

원래라면,Root 컴포넌트에서 G컴포넌트에게 어떠한 값을 전달해 줘야하는 상황에서 아래와 같이 전달해줘야 할 것이다.

그러다가 value라는 이름을 anotherValue 같이 이름을 바꾸는 일이 생기면, 파일을 일일이 들어가서 하나씩 변경을 해줘야 할 것이다.

😍하지만 리덕스를 쓰면, 상태관리를 컴포넌트 바깥에서 할 수 있다!

리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고 상태관리를 컴포넌트 바깥에서 관리 할 수 있게 된다.

🎶 Redux의 세 가지 원칙

1. 전체 상태값이 하나의 자바스크립트 객체로 표현됨
2. 상태값은 읽기 전용의 불변 객체로 관리한다
   • 리덕스이 상태값을 수정하는 유일한 방법 => 액션 객체와 함께 dispatch를 호출하는것(setState)
3. 오직 순수 함수에 의해서만 상탯값을 변경해야 한다
   - 리듀서는 이전 상탯값과 액션 객체를 입력으로 받아 새로운 상태값을 만드는 순수 함수

   state, action) => nextState