[React] Redux

Redux : 리덕스

• 리액트 state (상태) 관리 라이브러리
• 가장 많이 사용됨
• 전역 상태를 관리할 때 매우 효과적
• (Context API 사용해서 전역 상태 관리가능)
• 별도의 라이브러리설치하지 않고 전역 상태 관리
• Context를 만들어 한 번에 원하는 값을 받아와서 사용
• 컴포넌트들 사이에서 동일한 state를 공유해야할 경우 유용
• 다른 컴포넌트를 거치지않고 state 값을 가져와서 사용하거나 업데이트 가능
• 리액트 뿐 아니라 HTML, JavaScript에서 사용 가능

Redux를 사용하지않는 state 관리

Redux를 사용하지 않은 경우

• 상위 컴포넌트에서 하위 컴포넌트로 props를 통해 state 값과 함수명 전달
• 하위 컴포넌트에서 상위 컴포넌트로 prop를 통해 함수 호출 전달

Redux를 사용한 state 관리

• 스토어 안에 state 저장하고 컴포넌트들이 구독
• 상태 변화가 생기면 구독 중인 컴포넌트에 통보

Redux 장점

• 유지보수성 높고, 작업 효율성 극대화

• 편리한 개발 도구 지원

• 체계적으로 상태 관리가능하기 때문에 프로젝트 규모가 큰 경우 사용

• 미들웨어 기능 제공하여 비동기 작업을 효율적으로 관리 가능

Redux 개념

• 스토어

  • state 저장
  • 프로젝트에 리덕스를 적용하기 위해 사용
  • state를 수시로 확인해서 View에게 변경된 사항을 알려주는 역할
  • 한 개의 프로젝트에는 하나의 스토어만 존재

• 리듀서 (reducer)

  • state를 변경하는 함수
  • 전달받은 액션에 따라 새로운 상태를 만들어서 스토어에게 전달
  • 2개의 파라미터를 받음 (현재 state와 action)
  • 즉, 현재의 state 값을 어떻게 바꿀 것인지(action)에 대한 요청 처리
  • 두 값을 참고해서 새로운 상태를 만들어서 반환
  • state 변경하고 변경된 값 반환

• 디스패치

  • 스토어의 내장 함수
  • 액션 발생시키는 역할 (트리거 역할)
  • 리듀서에게 액션을 발생하라고 시키는 역할
  • 액션 객체를 파라미터로 전달
  • 디스패치 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만듦

• 액션

  • state에 일어나는 변화(동작)에 대해 선언되는 객체
  • type 필드 필수
  • if(action.type ===”PLUS”) 더하기 수행

Redux 사용

• Redux 라이브러리 설치
• 현재 버전이 redux 4.2 버전 설치되는데
• createStroe가 configureStore로 변경 (복잡)
• 버전 낮춰서 설치 : 4.12 버전으로 설치
• npm install redux@4.1.2 react-redux
• react-redux : redux와 react를 연결하는 도구
• 스토어 생성
• 리듀서 함수로 만들어서 사용
• useSelector , useDispatch