문제 상황 보통의 redux state는 새로고침 하면 state가 날아가기 때문에 persist 사용이 불가피하다. 현재 프로젝트에도 redux-persist를 사용하고 있었다. 아직까지는 전역으로 관리할 상태가 많지 않아서 reducer를 하나만 두고 사용하고 있는데, 같은 reducer에서 관리할 state에 프로퍼티가 하나 늘었다. 즉, // Reducer const initialState = { A: [] } 에서 // Reducer const initialState = { A: [], B: [] } 가 되었다는 뜻이다. 당연히 아무런 문제가 없을 줄 알고 액션마다 객체를 return 할 때 B에 대한 코드를 추가해서 수정해서 커밋했는데… 다른 팀원 분의 컴퓨터에서 테스트를 하니 에러가 났다. ..
Redux thunk 하고자 했던 것 로그인 시 token을 받아오고 그 token을 session Storage에 저장해 둔다. 또 하나 해야 할 일은 userId(인공키) 값을 전역 state에 저장해서 유저 관련 정보가 필요한 컴포넌트마다 사용하게 해야 하고, isLoggedIn 또한 전역 state에 저장하여 true 값이 유지되게 해야 한다. 이 기능을 구현하기 위해 redux를 사용했다. 아직 api 컨벤션을 사용하지 않아서 login api (아이디, 비밀번호로 request를 보내면 userid와 token을 response로 받는다)를 action 생성 함수에서 axios로 실행하고, 액션을 return 해 주었는데... 문제 어쩐지 sessionStorage에 저장만 되고... isLo..
Redux 기초 - 노션 백업
리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다. 리덕스는 프로젝트 내부의 상태를 하나의 단일 스토어에 저장하고, dispatch를 이용하여 action을 발생시킨 뒤 reducer를 통해 상태를 변경하는 것. Action → Dispatcher → Store → View → Action → Dispatcher (반복...) Action 상태에 어떠한 변화가 필요하면 액션이라는 것이 발생한다. 액션 객체는 반드시 type 필드를 가지고 있어야 함. 액션의 이름이라고 생각하면 됨 { type: 'ADD_TODO', ..
React 기초 React React는 자바스크립트 라이브러리로, “컴포넌트”라고 불리는 단위를 이용하여 복잡한 UI를 구성하도록 돕습니다. React 앱 만들기 1. Node.js 설치 공식 홈페이지에서 LTS 버전 설치 설치 후 cmd 창에서 node -v npm -v 명령어 실행해서 현재 버전 확인하기 (잘 설치되었는지 확인) 2. React 설치 npm i react 3. React App 생성 npx create-react-app my-app my-app은 생성할 App 이름입니다 typescript 버전: npx create-react-app my-app --template typescript 4. 실행 cd my-app npm run start 혹은 npm start state와 props ..
