리덕스_1

리덕스가 필요한 이유

• useState의 불편함

  1. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부모-자식 관계가 되어야 한다.

  2. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미* (조부모 → 부모 → 손자)

  3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다.

• Global state와 Local state

  • Local state (지역상태) 란?

    • 컴포넌트에서 useState를 이용해 서 생성한 state .
      좁은 범위 안에서 생성된 State 라고 보면 됨

  • Global state (전역상태)란?

    • Global state는 컴포넌트에서 생성되지 않음. 중앙화 된 특별한 곳에서 State들이 생성. 좀 더 쉽게 얘기해서 “중앙 state 관리소”

리덕스란?

• 리덕스는 전역상태 관리 라이브러리 이다.
• 리덕스는 useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소시켜준다.
• 리덕스는 중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성된다.
• useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다.
• 중앙 State 관리소를 Store라고 부름
• 모듈이란 State들의 그룹

리덕스 설정

• 2개의 패키지 설치 (리덕스와 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지)
  - yarn add redux react-redux

리덕스 정리

• 보통 모듈은 기능의 이름을 따서 파일을 생성한다.

• 모듈의 구성요소로는 initialState, Reducer가 있다.

• 모듈을 만들면, 스토어에 연결을 해야만 한다. 그리고 연결은 configStore.js에서 한다.

• 컴포넌트에서 Store를 조회할 때는 useSelector를 사용해야 한다.

• useSelector((state)⇒state) 에서 state는 모든 모듈의 state 를 조회할 수 있는 값이다.

• 리듀서가 액션객체를 받아 상태를 바꾸는 원리

  1. 컴포넌트로부터 dispatch를 통해 액션객체를 전달 받는다.
  2. action 안에 있는 type을 스위치문을 통해 하나씩 검사해서, 일치하는 case를 찾는다.
  3. type과 case가 일치하는 경우에, 해당 코드가 실행되고 새로운 state를 반환(return) 한다.
  4. 리듀서가 새로운 state를 반환하면, 그게 새로운 모듈의 state가 된다.

  리덕스 액션 생성 함수

• 액션객체를 만드는 함수를 Action Creator(액션 크리에이터)라고 한다.

• Action Creator는 모듈 파일안에서 생성된다.

• 액션객체의 type value로 상수로 생성해서 관리한다.

• Action Creator를 사용하면, 여러가지 문제점을 해소할 수 있다.