이번장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법에 대해 알아보겠습니다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만 프로젝트의 규모가 커짐에 따라 상태 관리가 복잡해질 수 있습니다. 리덕스를 사용하여 상태 관리를 하면 다음과 같은 장점이 있습니다. 1. 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어 코드를 유지보수 하는데 도움이 됩니다. 2. 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용합니다. 3. 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수 있다. 이번 실습의 흐름은 다음과 같습니다. 프로젝트 준비 → 프레젠테이셔널 컴포넌트 작성 → 리덕스 관련 코드 작성 → 컨테이너 컴..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:01

전개 연산자와 배열의 내장 함수를 이용해 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어쓸 수 있습니다. 그러나 객체 구조가 엄청나게 깊어지면 불변성을 유지하며 이를 업데이트하기 어렵습니다. 이번 장에서는 immer라는 라이브러리를 사용하여 구조가 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 업데이트하는 것을 배워보도록 하겠습니다. 12.1 immer를 설치하고 사용법 알아보기 immer 라이브러리를 사용하기 위해서는 yarn을 통해 설치해야 합니다.이번 예제로 쓸 리액트 프로젝트와 함께 immer을 설치해 주세요. $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer 위와 같이 폼에서 아이디와 이름을 입력하면..

22-23/22-23 리액트 스타터 1 2022. 12. 29. 10:01

INDEX 12장 immer를 사용하여 더 쉽게 불변성 유지하기 1. immer를 설치하고 사용법 알아보기 1.1 프로젝트 준비 1.2 immer를 사용하지 않고 불변성 유지 1.3 immer 사용법 1.4 App 컴포넌트에 immer 적용하기 1.5 useState의 함수형 업데이트와 immer 함께 쓰기 2. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 immer 라이브러리 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하며 업데이트할 수 있게 해주는 라이브러리 불변성을 유지하며 업데이트해야할 때 immer를 사용하지 않으면? 배열 또는 객체를 복사할 때: 전개 연산자(...)와 배열의 내장 함수 사용 객체의 구조가 엄청나게 깊어지면: 하나의 값을 업데..

21-22/21-22 리액트 스타터 -2 2022. 1. 17. 13:01

바닐라 자바스크립트 환경에서 리덕트 사용 시, store.dispatch나 store.subscribe 함수를 사용했으나, 리액트 애플리케이션에서 리덕트 사용 시, react-redux 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용 17.1 작업 환경 설정 $ yarn add redux react-redux //.prettierrc { "singleQuote":true, "semi":true, "useTabs":false, "tabWidth":2, "trailingComma":"all", "printWidth":80 } 17.2 UI 준비하기 리덕스에서 가장 많이 사용하는 패턴 : 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 분리 ⇒ 코드의 재사용도↑, UI 작성 시..

21-22/21-22 리액트 마스터 2022. 1. 17. 13:00

객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하기가 매우 힘듦 전개연산자를 여러 번 사용하는 것보다 immer라는 라이브러리 사용하는 것이 더 쉽게 불변성 유지 가능 12.1 immer를 설치하고 사용법 알아보기 yarn create react-app immer-tutorial cd immer-tutorial yarn add immer ▼immer를 사용하지 않고 불변성 유지 하는 코드 더보기 //App.js import React, {useRef, useCallback, useState } from 'react'; const App = () => { const nextId = useRef(1); const [form, setForm] = useState({name:'', userna..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00