TIL - Today I Learned (Day 15) - 리덕스를 사용하는 이유

 

• 오전에는 CS스터디 발표가 있어서 PPT 발표 정리를 했다.
• 오후에는 리액트 관련해서 아직 모르는 개념이 많아서 유튜브 강의를 들으면서 정리했다. 
• 리액트를 공부하면서 리덕스 관련한 내용이 많아서 리덕스를 쓰는 이유에 대해 강의를 찾아봤다.
• 기본적으로 JavaScript Application들의 state(상태)를 관리하는 방법이다.
• React와 별개다 / 그저 React와 많이 사용해서 유명해진 것.
• React에 의존하는 라이브러리가 아님

 

---

 

리덕스를 사용하는 이유

• 모든 component가 props 없이 state 직접 꺼내서 쓸 수 있다.
• state(상태관리)가 용이하다.

리덕스는 library

배경 component에 지정한 변수는 메뉴 component에서 바로 사용할 수 없어서 props문법을 넣어야한다 … 하위 component로 바로 사용하지 못한다.

 

 

• 리덕스라는 library 를 이용하면 모든 component에서 갖다 쓸 수 있다.
• 코드가 전체적으로 짧아지는 효과를 볼 수 있다.
• store.js에 조건문이나 요청에 관련된 코드를 짜놓으면 각각의 component는 store.js 에다가 요청만 하면 된다.
• 버그가 발생했을 때 추적이 쉽다.
• 버그가 발생했을 때 어떤 component에 오류가 발생했는지 추적할 필요없이 store.js에 모아뒀으니 해당 js에서만 찾아보면 된다.
• state가 어떻게 변경되었는지 한 곳에서 추적이 가능하다.

 

function reducer(state = 체중, action) {
    if (action.type === '증가') {
        state++;
        return state
    } else if (action.type === '감소') {
        state--;
        return state
    } else {
        return state
    }
}

(state 수정방법)

증가 요청하면 몸무게 +1

감소 요청하면 몸무게 -1

→ Reducer

컴포넌트에서 state 수정 요청하려면?

dispatch 사용.

 

function App() {

    const dispatch = useDispatch()

    return (
        <div className="App">
            <button onClick={() => {dispatch({type: '증가'})}}>더하기
            </button>
        </div>
    );
}

 

---

 

리덕스를 사용하는 이유 (정리)

• 모든 component가 props 없이 state 직접 꺼내서 쓸 수 있다.
• state(상태관리)가 용이하다.

리덕스 스토어에 조건문이나 요청에 관련된 코드를 짜놓으면 각각의 component는 리덕스 스토어에 요청만 하면 된다. 버그가 발생했을 때 추적이 쉽고 component에 오류가 발생하면 어떤 component에서 발생된 오류인지 각각의 component를 추적할 필요없이 리덕스 스토어에서 오류를 확인하면 된다.

 

💡 즉, 리덕스를 사용하면 component의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다.

 

 

 

Reference

https://www.youtube.com/watch?v=QZcYz2NrDIs