리액트 리덕스

이 시리즈는 벨로퍼트님의 강의문서 벨로퍼트와 함께하는 모던 리액트 를 읽고 정리한 내용임을 알립니다.따라서 벨로퍼트님의 강의문서에 적힌 설명과 코드들을 저 나름의 방식으로 정리하였고, 아쉬운 부분은 개념과 코드들을 추가적으로 첨부하였습니다.좋은 강의자료를 일반인에게도

React 생태계에서 가장 사용률이 높은 상태 관리 라이브러리이다.컴포넌트의 상태 관련 로직들을 다른 파일들로 분리시켜 효율적으로 관리할 수 있고, 글로벌 상태 관리도 손쉽게 할 수 있다.Reducer 와 action 의 개념을 사용하기 때문에 Context API 와

리덕스를 사용하게 될 때 접하게 될 키워드들을 알아보자. 대부분은 useReducer 를 사용할 때 접해본 개념이다.상태에 어떠한 변화가 필요하게 될 때, 우리는 액션이란 것을 발생시킨다. 이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이루어져 있다

하나의 애플리케이션에선 단 한개의 스토어를 만들어 사용한다. 여러개의 스토어를 사용하는 것은 사실 가능하기는 하나, 권장되지 않는다. 특정 업데이트가 너무 빈번하게 일어나거나, 애플리케이션의 특정 부분을 완전히 분리시키게 될 때, 여러개의 스토어를 만들 수도 있다. 하

리덕스에서 리액트를 사용하기 전에, 리액트 컴포넌트 없이, 리덕스에서 제공되는 기능들을 연습해보았다.

리액트 프로젝트에 리덕스를 적용하기 위해 리덕스 모듈을 만들어보았다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 의미한다.액션 타입액션 생성함수리듀서리덕스를 사용하기 위해 필요한 위 항목들은 각각 다른 파일에 저장할 수도 있다. 리덕스 GitHub

프리젠테이셔널 컴포넌트 만들기 프리젠테이셔널 컴포넌터란, 리덕스 스토어에 직접적으로 접근하지 않고 필요한 값 또는 함수를 props 로만 받아와서 사용하는 컴포넌트이다. src 디렉터리에 components 디렉터리를 만들고, 그 안에 Counter.js 를 다음과

Redux 를 공부하며 전반적인 흐름을 정리해보았다.

toggle 기능이 있는 todoList 를 구현해보았다.containers 디렉터리에 TodosContainer 컴포넌트를 생성하고 코드를 구현하였다.components 디렉터리에 Todos 컴포넌트를 생성하고 코드를 구현하였다.App 에서 렌더링하였다.브라우저에 정

리액트 컴포넌트에서 리덕스 상태를 조회해서 사용할 때, 최적화를 하기 위해서 어떤 상황을 고려해야 하는지 알아보자.지난번 할 일 목록을 만들 때에는 프리젠테이셔널 컴포넌트에 React.memo 를 사용하여 리렌더링 최적화를 해줬다. 컨테이너 컴포넌트에서는 어떤 것들을

Redux 를 이용하여 Todo App 을 만들어보았다. 기본적인 CRUD 기능현재 시간을 보여주는 시계 기능제목을 클릭했을 때 내용이 보이는 기능핵심CRUD 를 구현함에 있어서 title 과 content 는 하위 컴포넌트에서 useState 를 이용해 관리하고, 데

redux toolkit 을 이용하여 crud 를 구현해보면서 redux toolkit 에 대해 알아보았다. configureStore 을 이용하여 리듀서들을 간편하게 통합시킬 수 있다.기존과 거의 비슷한 index.js 세팅이 부분이 핵심이다. 기존의 redux 에서

Redux Toolkit 에서 사용되는 reducers 와 extraReducers 의 차이를 알아보자. stackoverflow 를 참고하였다.reducers 는 액션함수를 생성함과 동시에 해당 액션함수에 대응하는 역할을 한다. extraReducers 는 사용자가

redux 의 state 값을 변경(return) 할때는 불변성(immutable)을 유지시켜줘야 한다. 불변성을 유지하기 위해서는 새로운 객체를 return 해줘야 한다. 만약 새로운 객체가 아니라 기존의 state 값을 참조하여 state 를 return 한다면 r