20220425-0505_TIL : Redux

권지현·2022년 5월 5일
0

상태 관리 라이브러리에 관심이 생겨 Redux 강의를 들으면서 정리해보았다.

✍🏼 Redux 란 ?

자바스크립트 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구
복잡한 상태 관리가 이루어지는 SPA(Single Page Application)에서 특히 유용하다.

🤓 Redux를 사용하는 이유 ?

중앙집중적인 데이터를 store라는 저장소를 통해 쉽게 개발을 할 수 있다.
1. 컴포넌트마다 props로 전해줄 필요가 없이 개별로 state를 불러 올 수 있다.
2. state 관리가 용이하다. (state를 수정할 때 store에만 제어하는 코드를 작성하기 때문에 상태 확인 및 에러 관리 편리)
데이터 상태에 대한 기록이 있어 데이터가 어떻게 변화되는 지 확인할 수 있다.

💡 Redux를 사용하기 위해 알아야 할 용어

store - 데이터 저장소
createStore() - store(데이터 저장소) 생성, reducer를 인자로 받음
state, getstate() - 데이터
🚨 state는 직접 변경하지 않고 복사를 통해 새로운 state를 만들어 제어하는 방법을 추천한다..!!
state 원본의 순수성(불변성 유지)을 보존해야 state를 보존해야 기존 값 복원 혹은 다른 컴포넌트로 전달되는 state를 제어하기 수월하다.
action - 상태를 설명해주는 객체
dispatch로 받은 type에 따라 state를 변경한다.

reducer - state를 수정하는 함수
state와 action을 인자로 받아(참조해서) 새로운 state를 리턴한다.

function reducer(state,action){
  //...
  //action에 따라 state를 변경시키는 작업
	if(action.type === "increase"){
    	state++;
      return state;
    }
}

render - state값을 참조해 즉, 변경된 state값을 반영해 UI를 그려준다.
subscribe - state 값이 바뀔 때마다 UI가 다시 그려지도록 영향을 준다.

const reducer = (state, action) => {
  if(action.type === "increase"){
    	state++;
      return state;
  }
}

const onChange() => {
  console.log("changed");
}
//subscribe로 해당 함수를 호출 -> state 수정 요청될 때 마다 함수 호출
store.subscribe(onChange);

store.dispatch({type: "increase"})
store.dispatch({type: "increase"})

>>> changed
>>> changed

dispatch - store에 있는 state를 수정 요청하기 위해 쓰이는 함수
dispatch 안에서 action.type을 변경해주면 된다.

//react-redux
const dispatch = useDispatch()

//JSX
<button onClick={()=>{
  dispatch({type:'increase'})
}}>+</button>

useSelector - react-redux에서 사용하는 hooks.
redux 스토어의 현재 상태를 조회할 수 있다.

const newState = useSelector((state)=>state)

<div>{newState}</div>

✔️ 참고할 만한 강의, 블로그
Inflearn, 생활 코딩, 노마드코더
Redux 참고 블로그 - 1
Redux 참고 블로그 - 2

profile
FE 개발자 성장 기록 👩🏻‍💻

0개의 댓글