220325 리덕스

❓ 상태 관리 도구란?

• 부모 컴포넌트를 거치지 않고 자식 컴포넌트들 간의 직접적인 데이터 전달은 불가능하다
  
• 그런데 자식 컴포넌트들이 많아지면 상태 관리가 매우 복잡해진다

  • 예를 들어 A라는 최상위 컴포넌트가 있고, 그 밑으로 100개의 자식 컴포넌트가 있다고 가정하자.
    근데 최상위 컴포넌트에 있는 상태(state)를 100번째 자식 컴포넌트에서 참조해야 한다면
  • 첫번째 자식 컴포넌트부터 99번째 자식 컴포넌트들은 쓰지도 않을 state를 100번째를 위해서 가지고 가야한다
    
  • 이런 현상을 Props drilling 이슈라고 한다

❗ 상태 관리 라이브러리는 이런 복잡성을 해결해준다

• 상태 관리 라이브러리는 전역 상태 저장소를 제공한다
• 자식 컴포넌트들은 전역 상태 저장소에서 필요한 state를 가져다 쓰면 되기 때문에,
  props drilling 이슈를 해결할 수 있다

👉 리덕스 (Redux)

• 자바스크립트로 구동되는 어플리케이션에서
  예측 가능한 상태관리를 도와주는 상태관리 라이브러리

• 리덕스는 리액트 생태계에서 사용률이 가장 높은 상태(state) 관리 라이브러리

• 리액트에서 사용률이 가장 높기는 하지만,
  리액트 뿐만 아니라 다른 자바스크립트 프레임 워크에서도 쓰이는 상태 관리 라이브러리이다

❗ 리덕스의 세가지 원칙

1. 하나의 애플리케이션 안에는 하나의 스토어만 존재한다

2. 상태는 읽기전용이다

   • 불변성을 지켜줘야 한다
     • 즉, A에 +1을 할 때, A = A+1이 되는 게 아니고, A' = A+1이라고
       새로운 값을 만들고 A를 A'로 바꾸는 것
   • store의 state(데이터)는 오직 action으로만 변경할 수 있다
   • 리액트에서 상태 관리는 직접 하지 않고, setState 메소드를 활용해야만 변경이 가능했던 것처럼
     리덕스에서도 액션 (action)이라는 객체를 통해서만 변경이 가능하다

3. 변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다

   • 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받는다
   • 이전의 상태는 절대로 변경하지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환
   • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 한다

✅ 리덕스 용어 정리

• state
  • 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 좋다)을 state라고 부른다

• Action
  • Action은 어떤걸 하는지에 대한 지시가 있는 객체
  • 액션 객체에는 type field는 필수로 들어가야하는데,
    타입 필드는 action을 묘사하는 이름(feature)을 가진 string이어야 한다
  • 상태에 어떠한 변화가 필요하게 될 때 액션이라는 것을 발생시킨다

//action
{
type : "ADD_TODO",
data : {
  text : "리덕스 배우기"
}
}

• Action creator
  • 액션을 만드는 함수로, 액션 생성 함수라고도 한다
    파라미터를 받아와 action 객체를 생성하고 반환한다
  • 보통 함수 앞에 export 키워드를 통해 다른 파일에서 불러와서 사용

export const addTodo = (data) => {
	return {
		type: "ADD_TODO",
		data
	};	
}

• Reducer
  • 리덕스에 저장된 상태(=데이터)를 변경하는 함수
  • 현재 state와 action 객체를 받아서 필요한 경우 업데이틀 할 방법을 결정하고,
    새로운 상태를 반환한다

• Store
  • 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져온다
  • 중요한 몇 가지 내장 함수가 포함되어 있다
  • 생김새는 딕셔너리 혹은 json처럼 생겼다

• Dispatch
  • store는 dispatch라는 메서드를 가지고 있다
  • dispatch는 action을 발생시키는 메서드라고 생각하면 쉽다
  • 상태를 업데이트 하기 위해서는 store.dispatch() 메서드를 호출하고
    action 객체를 넘겨주면 된다

리덕스 상태관리 흐름도