React Redux

컴포넌트 끼리 값을 넘겨주던가, 뭐 넘어가던가 할 때 props를 이용해 값을 전달하곤 한다. 근데 크고 복잡한 프로젝트라 타고타고타고타고 넘어가야하는 문제가 생긴다! props의 깊이가 너무 깊어지는 상황이 발생하는 거다.
이를 해결할 수 있는 게 바로 Redux이다.
Redux는 가장 사용률이 높은 상태관리 라이브러리이다. 어젠가 유튜브에서 봤을때 상태관리 라이브러리 사용자 48%가 Redux를 쓴다고 본 거 같다.
어마어마한 비율이다. 근데 Redux를 쓰는 게 무조건 좋은 거는 또 아니라고 한다. 지금은 회사에서 Redux를 이용하고 있고 아직 Redux도 제대로 마스터 못한 초짜이기에 우선 Redux 사용법에 익숙해진 다음에 다른 상태관리 라이브러리에 대해 알아볼 시간을 가지겠다.
참고글 : https://mjn5027.tistory.com/33 감사합니다 :-)

Redux는 리액트 내부의 기술도 아니고, React만 쓸 수 있는 라이브러리도 아니다. Angular, Vue, 바닐라 JS 등 모두가 사용 가능하다.
하지만 컴포넌트에 집중된 리액트와 시너지가 좋아 리액트 유저들이 리덕스를 많이 이용하는 것이다.

리액트에서 자주 사용되는 키워드에 대해 알아보자.

프로젝트 리덕스 폴더 안에 액션과 리듀서가 있다. 우선 액션부터 살펴보자

Action (액션)

state에 어떤 상태변화가 필요할 때 우리는 액션이라는 것을 발생시킨다고 한다. 액션이라... 갑자기 이게 무슨 액션빔같은 말일까.
액션이라는 단어 그대로 어떤 동작에 의해 선언된 객체라고 한다.
액션은 반드시 type 필드를 가지고 있어야하고, 그 외의 값은 상황에 따라 넣어줄 수 있다고 한다.

// action 1
{
    type: "NUMBER_COUNT"
},

// action 2
{
    type: "CHANGE_INPUT",
    text: "안녕하세요
}

type 필드는 말 그대로 어떤 동작인지를 표기한 것.
ex) 말덕아 밥을 먹어라. 말덕아 숫자를 세어라

Action Creator (액션 생성 함수)

본격적으로 리덕스로 상태관리를 하려면 이 액션 크리에이터를 만들어야한다.
위 설명된 액션이 이 동작에 의해 선언된 객체라면... 액션 크리에이터는
이 액션을 생성해 실제로 객체로 만들어주는 함수이다.
뭔 말이지? 이해가 안 가니 예제를 보자.

프로젝트 파일을 살펴보았다. 파일들이 board.js BoardType.js 이런식으로 나뉘고있다. 위 글에서처럼 액션은 반드시 type 필드를 가지고 있어야한다는 게 이 말인듯 싶다.

Reducer (리듀서)

state에 변화를 일으키는 함수. 쉽게 말하면 위에 만들어진 Action 등의 일거리를 직접 수행하는 역할을 맡고 있다.
리듀서는 state와 action을 인자로 받아서 store에 접근해 action에 맞춰서
state를 변경한다.

function account(state, action) {
    switch(action.type) {
        case 'NUMBER_COUNT':
            return state + 1;
        case 'CHANGE_INPUT':
            return state;
        default:
            return state;
    }
}

Store (스토어)

스토어는 현재 앱의 State와 Reducer 함수, 그리고 몇 가지 내장 함수등을 가지고 있다고 한다.