1. useReducer 이해하기useReducer은 컴포넌트에서 상태 변화 코드를 분리할 때 유용한 리액트 훅이다.  1 - (1). 실습 준비하기상태 변화 개념을 이해하기 전, 실습을 통해 useReducer의 기능을 알아보자. [할 일 관리] 앱을 열고 component 폴더에 TestComp 컴포넌트를 만든다. TestComp.js 파일의 내용은 다음과 같다.import {useState} from "react";function TestComp() { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count+1); } const onDecrease = () => { ..

24-25/React.js 1 2025. 1. 10. 10:00

16장 리덕스 라이브러리 이해하기 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능하다. 코드의 유지 보수성을 높여 주고 작업 효율도 극대화 해준다. 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리할 수 있다. 16.1 개념 미리 정리하기 16.1.1 액션 상태에 변화가 있으면 액션이 발생한 것이다. 액션의 하나의 객체로, 액션 객체로 불린다. 액션 객체는 type 필드를 반드시 가지고 있어야함. 외의 값들은 작성자가 원하면 설정. //액션 객체의 예시 { type: 'TOGGLE_VALUE' data: { id: 1, text: '리덕스 배우기' } } 16.1.2 액션 생성 함수 액션 생성 함수(action creator) : 액..

23-24/React.js 3 2024. 1. 19. 10:00

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리로, 이를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 이외에도 Context API를 통해서 전역 상태를 관리할 수 있지만, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. I. 개념 미리 정리하기 리덕스를 사용하면서 접하게 될 키워드의 개념이다. 1. 액션 상태에 어떠한 변화가 필요하면 액션(action)이 발생한다. 이는 하나의 객체로 표현되며, 액션 객체는 다음과 같은 형식으로 이..

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

INDEX 16장 리덕스 라이브러리 이해하기 1.개념 미리 정리하기 1.1 액션 1.2 액션 생성 함수 1.3 리듀서 1.4 스토어 1.5 디스패치 1.6 구독 2. 리액트 없이 쓰는 리덕스 2.1 Parcel로 프로젝트 만들기 2.2 간단한 UI 구성하기 2.3 DOM 레퍼런스 만들기 2.4 액션 타입과 액션 생성 함수 정의 2.5 초깃값 설정 2.6 리듀서 함수 정의 2.7 스토어 만들기 2.8 render 함수 만들기 2.9 구독하기 2.10 액션 발생시키기 3. 리덕스의 세 가지 규칙 3.1 단일 스토어 3.2 읽기 전용 상태 3.3 리듀서는 순수한 함수 4. Question 개념 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 리덕스를 왜 사용하는가? 컴포넌트의 상태 업데이트 관련 로직을 다른 ..

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

리덕스 : 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직 분리 컴포넌트 상태 똑같게 공유 시, 여러 컴포넌트를 거치지 않고 상태 값 전달 및 업데이트 가능 전역 상태 관리 시, 효과적 코드의 유지 보수성 높여 줌 작업 효율 극대화 편리한 개발자 도구 지원 미들웨어 기능 제공하여 비동기 작업 효율적 관리 가능 16.1 개념 미리 정리하기 1) 액션 상태에 변화가 필요하면 액션이 발생 액션은 객체로 표현되며, type 필드(액션의 이름)를 반드시 가지고 있어야 함 { type: 'TOGGLE_VALUE' data: { id:1, text:'리덕스 배우기' } } 2) 액션 생성 함수 액션 객체를 만들어주는 함수 → 직접 작성하기 번거롭거나, 실수하는 일을 방지하기 위함 function ad..

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