[06.22] Redux

Redux?

: "action"이라는 이벤트를 사용하여 애플리케이션의 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리(상태 관리 라이브러리)

➡️ 애플리케이션의 여러 부분에서 필요한 상태인 "전역" 상태를 관리하는데 도움을 줌

Redux 없이 상태 관리하기

• 상태를 직접 사용하지 않는 최상위 컴포넌트들도 상태 데이터를 가짐
• 상태 끌어올리기, props 무한 반복
• 애플리케이션이 복잡해질수록 데이터 흐름도 복잡
• 컴포넌트 구조가 바뀐다면 데이터 흐름을 완전히 바꿔줘야함
• 상태와 영향을 받지 않는 컴포넌트들도 렌더링이 되면서 성능 악화
  
  
  
  

Redux의 구조와 개념

Redux 구조

1. 상태가 변경되어야 하는 이벤트(count 증가 or 감소)가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됨
2. 해당 Action 객체는 Dispatch 함수의 인자로 전달됨
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줌
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경함
5. 상태가 변경되면, React는 화면을 다시 렌더링함

Redux 개념 및 실습

Store

: 상태가 관리되는 유일한 저장소의 역할이며 스토어 안에는 현재의 앱 상태와 리듀서가 들어가있고, 추가적인 내장함수들이 있음

Reducer(순수함수 : 상태가 변경되면 X)

: store안의 state를 어떻게 바꿀 것 인가(2가지의 파라미터를 가져옴)

• 인자 1 : 현재의 state값

• 인자 2 : 어떻게 바꿀것인지(action)

  //{ reducer }로 쓰게 되면 에러가 발생하니 중괄호를 빼고 써야함
  import  {reducer}  from '../Reducers';
  
  function reducer (인자1,인자2) {
  return 새로운 상태값
  }

Action

: 클릭과 같은 사용자 상호 작용에 대한 응답으로 전달

• Action 객체는 type 필드를 필수적으로 가지고 있어야 하고 필요에 따라 payload를 작성해 구체적인 값을 전달함

• payload는 필수는 아니지만 항상 동일한 처리를 해줄수 있을때는 payload를 안써도 되지만 특정한 값을 넣고 업데이트가 필요할때는 payload를 씀

• Action Creator (액션 생성자 함수)
  : 액션을 만드는 함수, 파라미터를 받아와서 액션 객체 형태로 만들어줌

  // payload가 필요 없는 경우
  const increase = () => {
  	return {
  		type: 'INCREASE'
  	}
  
  // payload가 필요한 경우
  const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num
  	}
  }

Dispatch

: Store의 내장함수 중 하나이며 Reducer로 Action을 전달해주는 함수 (Dispatch의 전달인자로 Action 객체가 전달됨)
➡️ 호출이 되면 Store는 Reducer 함수를 실행시켜서 관련된 Action을 참고하여 새로운 상태를 만들어줌

  dispatch( increase() );
  dispatch( setNumber(5) );

Redux Hook

• Provider : 컴포넌트 (울타리 같은 역할)
• useSelector : 사용하고 싶은 state의 값/ 컴포넌트와 state를 연결해서 store에 저장된 state에 접근할 수 있게 해주는 메서드
• useDispatch : state 값을 변경시킬때/ Action 객체를 Reducer로 전달해주는 Dispatch 함수를 반환하는 메서드