-
오전에는 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
