하얀 코딩

리덕스의 action은 애플리케이션의 상태를 변경하기 위해 스토어에 보내는 신호입니다. 액션은 애플리케이션의 어떤 사건이 일어나는 것을 설명하는 객체입니다. 액션의 구조 기본적으로 액션은 type 필드를 필수로 갖는 객체입니다. type은 액션의 종류를 나타내는 문자열입니다. { type: 'INCREMENT' } 또한 추가적인 데이터를 포함할 수도 있습니다. 이런 추가적인 데이터를 "payload" 또는 "meta" 데이터라고 부르기도 합니다. { type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' } } 액션의 생성자 액션 생성자는 액션 객체를 생성하는 함수입니다. 액션 생성자는 애플리케이션 로직에서 액션 객체를 쉽게 만들기 위해 사용됩니다. funct..

리덕스의 reducer는 애플리케이션의 상태를 변경하는 데 핵심적인 역할을 하는 함수입니다. 액션 객체를 받아 상태의 변화를 정의하는 역할을 합니다. 기본 원칙 1. 순수 함수 Reducer는 순수 함수여야 합니다. 같은 인풋에 대해서는 항상 같은 아웃풋을 반환하며, 외부의 상태나 변수에 의존하지 않아야 합니다. 2. 불변성 유지 Reducer 내에서는 상태를 직접 수정하면 안 됩니다. 대신, 상태의 변화를 나타내는 새로운 객체를 생성하여 반환해야 합니다. 함수의 구조 가장 기본적인 다음과 같은 형태를 가지고 있습니다. function reducer(state = initialState, action) { // 상태 업데이트 로직 return newState; } state 현재의 상태입니다. 리듀서의 ..

리덕스의 Store는 리덕스 애플리케이션의 상태를 저장하고 관리하는 핵심적인 객체입니다. 리덕스에서는 애플리케이션의 모든 상태가 이 하나의 스토어 내에 집중되어 있습니다. 이를 통해 일관성 있는 상태 관리와 시간 여행 디버깅, 상태의 불변성 유지 등의 이점을 얻을 수 있습니다. 생성 createStore 함수를 사용하여 스토어를 생성합니다. 이 함수는 리듀서와 초기 상태, 그리고 미들웨어나 enhancer와 같은 옵셔널 인자를 받을 수 있습니다. import { legacy_createStore as createStore } from 'redux'; // 현재 공식문서에서는 createStore를 사용하려면 legacy_createStore를 임포트 해야합니다. // as 문법을 써서 옛날처럼 creat..

이 파트에서는 개념은 꼭 이해 하는 것이 중요 합니다! 여기있는 내용을 모두 자세히 알기에는 어렵습니다. 😠 "그렇구나" 정도로 넘어가도 좋아요! 이 이후에는 다양한 메서드의 활용 방법을 통해 흐름을 파악해 봐요! ✏️ Redux는 다음과 같은 순서로 상태를 관리합니다. 1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다. 3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다. 4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다. 상태가 변경되면, React는 화면을 다시 ..

자바스크립트 싱글 페이지 애플리케이션이 갖추어할 요건이 점점 더 복잡해지고있는 만큼, 어느 때보다도 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다. 여기에서 상태에는 서버 응답, 캐시 데이터, 지역적으로 생성해서 사용하고 있지만 아직 서버에 저장되지 않은 데이터를 의미합니다. 이외에도 활성화된 라우트, 선택된 탭, 로딩을 보여줄지 여부, 페이지네이션 컨트롤 등 다양한 UI 상태도 포함합니다. Redux는 크게 세 가지의 핵심 원칙을 기반으로 합니다. 1. 단일 진실의 원천 (Single Source of Truth) 애플리케이션의 모든 상태는 하나의 저장소 (store)에 저장됩니다. 이로 인해 앱의 상태를 디버깅하거나 조사할 때 훨씬 쉬워집니다. 2. 상태는 읽기 전용 (State is R..