COCO World

🍡 Redux에 대해 알아보자 개념 상태 관리를 하기 위한 라이브러리로서, 상태관리 로직을 컴포넌트 밖에서 처리하여 State를 보다 효율적으로 관리하기 위한 목적을 가지고 있다. 리덕스를 사용하는 이유는 상태 관리를 하는 이유부터 알아본다면 훨씬 이해하기 쉽다. 상태 관리를 하는 이유? 2023.06.11 - [Front-End/React] - [리액트/React] 상태 관리는 왜, 어떻게 하는가? 사용 이유 Redux를 사용하는 이유는 상태 관리를 State를 전역적(Global)으로 관리하기 위해 사용하는데 이는 위에 개념에서 아시다시피 컴포넌트 밖에서 처리하기 위한 이유와 동일하다. 전역에서 사용하는 목적은 방대하게 커지는 프로젝트 규모에 의하여 리액트 특유의 단방향 데이터흐름의 문제점인 Pr..

1. Redux 의 흐름 구조 [1] 상태가 변경되어야 하는 이벤트가 발생하면 변경될 상태에 대한 정보가 담긴 Action 객체 생성 [2] 만든 Action 객체는 Dispatch 함수의 인자로 담겨져 전달됨 [3] Dispatch함수를 통해 담겨져 온 Action 객체는 Reducer 함수로 전달해줌 [4] Reducer 함수는 Action 객체의 데이터값을 확인하고, 그 값을 가공하여 전역 상태 저장소인 Store의 상태를 변경 [6] Store에서 변경된 상태값은 React의 리렌더링을 통해 컴포넌트에서 보여줌 2. 리액트 개발 시, 렌더링 최적화 방법에 이용할 수 있는 다음 세 가지의 특징과 차별점 React.memo [1] React.memo 특징 : React는 먼저 컴포넌트를 렌더링 한 뒤..

1. Redux 설치 리액트에서 리덕스를 사용하기 위하여 패키지 설치를 해줘야 한다. // 한번에 설치하기 yarn add redux react-redux // 아래처럼 따로 설치하기 yarn redux yarn react-redux 2. 폴더 구조 생성 [1] src 폴더 안에 redux 폴더를 생성 [2] redux 폴더 안에 config, modules 폴더를 생성 [3] config 폴더 안에 configStore.js 파일을 생성 각각 폴더와 파일의 역할 redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더 config : 리덕스 설정과 관련된 파일들을 놓을 폴더 configStore : '중앙 state 관리소'인 Store를 만드는 설정 코드들이 있는 파일 modules : 우리가 만들..