redux

Redux를 설치하기전에! 🤷 왜 React에 Redux를 사용할까? Redux 는 상태관리를 하기 위해서 사용하는데요. 간단하게 React에서 Redux를 사용하는 이유 중 하나는 성능 최적화입니다. (공식문서기준) React 는 상태가 바뀔때마다 컴포넌트가 업데이트됩니다. 그말은 즉 상태가 바뀔때마다 재렌더링 된다는거죠. "재렌더링..? 어떻게 재 렌더링 된다는거죠?" 리액트는 단방향 데이터 흐름 이기 때문에 부모컴포넌트는 자식 컴포넌트에게 props를 보내고 자식 컴포넌트는 부모컴포넌트의 props를 받습니다. 그럼 부모 컴포넌트의 상태값이 변하면 자식 컴포넌트도 렌더링이 되겠죠? 부모 컴포넌트가 상태값이 변할때마다 자식컴포넌트도 같이 재렌더링되요. 그래! 자식이 하나 있으면 뭐 괜찮아요 하지만 자..

Redux thunk Redux의 비동기 작업을 하기위해 필요한 미들웨어 중 하나 thunk! thunk는 액션객체가 아닌 함수로 디스패치 한다. user의 정보를 가져오는 api 호출을 thunk 를 사용하여 만들어본다고 하면? // 비동기 액션 크리에이터 function userInfoAction(data) { return (dispatch,getState) => { axios.get("api/user") .then((res)=>{ dispatch(userInfoSuccess(res.data)); }) .catch((err)=>{ ... }) } } api를 호출할 비동기 액션 크리에이터를 만들어주었다. thunk에서는 함수를 디스패치할때 dispatch,getState를 파라미터 값으로 받아주어야 ..

redux 의 state값을 변경할땐 불변성을 유지해주어야 한다. 왜냐 리덕스를 사용하는 이유 중 하나가 히스토리가 관리되기 때문! 변경하기 전 state값과 변경후의 state의 값을 비교하려면 불변성을 지켜줘야된다. const obj1 ={} const obj2 ={} obj1 === obj2 //false obj1 과 obj2 를 비교하면 false이다 왜냐 둘다 새 객체이기 때문이다. const obj1 = {a:2}; const obj2 = obj1.a obj2 === obj1.a // true obj2에 obj1의 a속성값을 넣어주고 서로 비교하면 true가 된다. 이럴경우엔 참조관계가 되기 때문이다. (....) const initialState = { name:'kim', job:'stud..

>>Redux state를 관리하는 도구입니다 store라는 저장소에서 component들의 state를 관리하죠 component가 많아지고 관리해야하는 state들이 많아지면 props관리가 힘들어집니다. redux를 사용하게 되면 모든 component에서 reducer함수와 action을 통해 state에 접근 할 수 있습니다. 그럼 어떻게 state를 관리할까요 바로 action을 dispatch하면 reducer함수를 호출합니다. reducer는 store에가서 현재 state값을 가져와 새로운 state를 반환해줍니다. action //components import {TEST} from './redux' //action type 가져오기 dispatch({type:TEST}) dispatc..