728x90 728x90 Frontend/Redux4 Redux 사용 시 주의사항 Redux 사용 시 주의사항 state 업데이트 Redux가 기존의 state를 새로운 state로 대체하기 위해서 새로운 객체인 새 snapshot을 항상 반환해야 한다. 이전 state를 덮어쓰기 때문에 state를 업데이트할 때는 업데이트 하려는 state 외에 다른 state를 설정해야한다. 여기서 왜 state에 직접 접근하여 업데이트하지않고 새로운 상태로 반환해야하는지 의문이 생길 수 있다. 만약 아래와 같이 코드를 작성한다면 작동이 될 것이다. 하지만 이것이 작동되는 것처럼 보이지만 잘못된 것이며 절대 기존의 state를 변형해서는 안된다. 항상 새로운 state 객체를 반환하여 재정의한다. if (action.type === 'increment') { state.counter++; retu.. 2023. 2. 15. React에서 Redux 사용하기 React에서 Redux 사용하기 리액트에서 리덕스를 사용하기 위해서 redux 패키지를 설치하는데 redux만 설치하는 건 아니다. 리덕스는 리액트에서만 쓰는 게 아니고 어떤 자바스크립트 프로젝트에서도 사용될 수 있다. 리덕스는 리액트에 관해 알지도 못하고 리액트에 관심도 없다. 리덕스와 리액트 앱의 작업을 쉽게 하기 위해서 react-redux 패키지를 추가로 설치한다. npm install redux react-redux 먼저 store 폴더를 만들고 store를 정의한다. import { createStore } from 'redux'; const counterReducer = (state = { counter: 0 }, action) => { if (action.type === 'incremen.. 2023. 2. 14. Redux 작동방식 Redux 작동방식 리덕스는 애플리케이션에 있는 하나의 중앙 데이터(상태) 저장소이다. 2개 이상의 저장소를 가지지 않고 오직 한 개의 저장소를 가진다. 그 저장소에 인증 상태, 테마, 입력 상태 등 무엇이든 저장할 것이다. 그러면 관리가 어려울 것 같은데 그 저장소 전체를 항상 직접 관리할필요가 없다. 궁극적으로는 그 저장소에 데이터를 저장해서 우리는 컴포넌트 안에서 그걸 사용할 수 있다. 저장소에 있는 상태가 변경되면 우리의 컴포넌트에서 그걸 인지해서 그에 맞춰 대응하고 UI를 업데이트하기 위해서 중앙 저장소에 대한 구독을 설정한다. 컴포넌트가 저장소를 구독하고 데이터가 변경될 때마다 저장소가 컴포넌트에 알려주게 된다. 또한 그 데이터를 변경할 방법이 필요한데 컴포넌트는 저장소에 있는 그 데이터를 직.. 2023. 2. 13. Redux의 개념과 사용하는 이유 리덕스의 개념과 사용하는 이유 리덕스란? 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다. 리덕스는 다수의 컴포넌트나 심지어는 앱 전체에서 state를 관리하도록 도와준다. 우리는 상태를 세 가지로 구분할 수 있는데 로컬 상태, 크로스 컴포넌트 상태,앱 와이드 상태이다. 로컬 상태 (Local State) 로컬 상태는 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태이다. 예를 들면 사용자 입력을 받고 useState를 사용해서 그 입력을 state 변수에 저장하고 토글 버튼을 클릭하면 세부 정보가 표시되고 다시 클릭하면 감춰지게 되는 경우이다. 보통은 useState를 사용해서 컴포넌트 안에서 로컬 상태를 관리하고 약간 복잡하다면 useReducer를 사.. 2023. 2. 12. 이전 1 다음 728x90 728x90
