1. useReducer 이해하기 이전에 작성한 [할 일 관리] 앱을 열고 component 폴더에 TestComp.js라는 임시 컴포넌트를 하나 만든다. TestComp.js 작성 import { useState } from "react"; function TestComp() { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( 테스트 컴포넌트 {count} + - ); } export default TestComp; TestComp를 App 컴포넌트의 자식으로 배치해 페이지에 렌더링 한..

23-24/React.js 2 2023. 12. 29. 10:00

7장 useReducer와 상태 관리 useReducer 이해하기 상태 변화 코드를 쉽게 분리할 수 있다. 실습 준비하기 1. component > TestComp.js 생성 import {useState} from "react"; function TestComp() { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count+1); }; const onDecrease = () => { setCount(count-1); }; return ( 테스트 컴포넌트 {count} + - ); } export default TestComp; + 버튼 : onIncrease 함수 호출 → count 값 +1 - 버튼 : onDec..

23-24/React.js 3 2023. 12. 29. 10:00

useReducer 이해하기 useReducer는 useState와 더불어 리액트 컴포넌트에서 State를 관리하는 리액트 훅입니다. useReducer는 State 관리를 컴포넌트 내부가 아닌 외부에서 할 수 있게 만듭니다. useState와 달리 useReducer를 이용하면 컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있습니다. 📌 상태 변화 코드 State값을 변경하는 코드 상태 변화 코드를 분리한다는 말은 컴포넌트 내부에 작성했던 상태 변화 코드를 외부에 작성한다는 뜻입니다. 그러나 useState를 이용해 State를 만들면 상태 변화 코드 분리 불가합니다. 반드시 컴포넌트 안에 작성해주어야 합니다. 하지만 useReducer를 사용하면 상태 변화 코드를 컴포넌트 밖으로 분리할 수 있습니다...

23-24/React.js 1 2023. 12. 29. 10:00

0. Hooks 함수형 컴포넌트: state 사용 불가 / Lifecycle에 따른 기능 구현 불가 / Hooks 클래스 컴포넌트: 생성자에서 state를 정의 / setState() 함수를 통해 state 업데이트 / Lifecycle methods 제공 Hooks: 리액트 v16.8에 새로 도입된 기능으로 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. (실습을 진행하기 위해 Create React App으로 새로운 앱을 생성한다.) 1. useState 가장 기본적인 Hook, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용한다. 1. useState 이용해서 숫자..

23-24/React.js 2 2023. 11. 24. 10:00

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. useState 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. useState는 코드 상단에서 import 구문을 통해 불러오고, 다음과 같이 사용합니다. const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 위의 코드에서는 0을 넣어 주었는데, 이는 카운터의 기본값을 0으로 설정하겠다는 의미입니다. 이 함수가 호출..

23-24/React.js 1 2023. 11. 24. 10:00

Hook Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. useState 가장 기본적인 Hook으로, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. 📌사용법 const [변수명, set함수명] = useState(초기값); useState 기능을 사용한 숫자 카운터 구현 import React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)..

23-24/React.js 3 2023. 11. 24. 10:00

지난 장에서 학습한 내용을 활용해 애플리케이션을 만들었습니다. 데이터가 적을 때 사용하는 것은 불편하지 않지만, 데이터가 무수히 많아지면 지연이 발생하여 애플리케이션이 느려질 것입니다. 이번 실습에서는 이를 해결하는 과정을 다룹니다. 이번 장에서는 많은 데이터를 렌더링하고, 크롬 개발자 도구로 성능을 모니터링하고, React.memo를 통해 컴포넌트 리렌더링 성능을 최적화하고, onToggle과 onRemove가 새로워지는 현상을 방지하고, react-virtualized를 사용하여 렌더링을 최적화하겠습니다. 11.1 많은 데이터 렌더링하기 우선 지연을 발생시키도록 많은 데이터를 렌더링하겠습니다. App 컴포넌트를 수정합니다. //App.js import { useState, useRef, useCall..

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

데이터가 무수히 많아지면 앱 속도가 느려지는 것을 체감할 정도의 지연이 발생한다. I. 많은 데이터 렌더링하기 => App 컴포넌트를 다음과 같이 수정하여 데이터를 추가하면 랙(lag)이 발생한다. createBulkTodos 함수를 만들어 2500개의 데이터를 자동 생성한다. //App.js function createBulkTodos() { const array = []; for(let i=1;i { const [todos, setTodos] = useState(createBulkTodos); const nextId = useRef(2501); (...) }; export default App; 주의할 점은 useState의 기본값에 함수를 넣어 주었다는 것이다. useState( createBulk..

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

Hooks는 리액트 v16.8에 새로 도입된 기능으로, 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업(함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect)을 할 수 있게 해 줍니다. 이번 실습은 우선 리액트 내장 Hooks를 사용하고 다음으로 커스텀 Hooks를 만드는 흐름으로 진행하겠습니다. 실습을 진행하기 위해 create-react-app을 사용하여 새로운 프로젝트를 생성해주세요. $ yarn create react-app hooks-tutorial 8.1 useState 3장에서도 사용해 보았던 useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 만약 함수 컴포넌트에서 상태를 관..

22-23/22-23 리액트 스타터 3 2022. 11. 24. 10:27

이번 8장에서 다룰 Hooks는 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업(함수 컴포넌트에서 상태 관리하기, 렌더링 직후 작업 설정하기 등)을 할 수 있게 합니다. 이는 리액트 v16.8에 새로 도입되었습니다. 이번 장에서 리액트 내장 Hooks를 사용하고 커스텀 Hooks를 만들어봅시다. 실습을 위하여 create-react-app을 이용해 새로운 프로젝트를 생성합시다. $ yarn create react-app hooks-tutorial 8. 1 useState 3장에서 사용하였던 useState는 가장 기본적인 Hook이며 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 합니다. 함수 컴포넌트에서 상태를 관리해야 할 때 이 Hook을 사용하면 됩니다. 이 useState를 사용하여 숫자 ..

22-23/22-23 리액트 스타터 1 2022. 11. 24. 10:00

**Hooks를 사용하는 방법 (1) 리액트 내장 Hooks 사용하기 (2) 커스텀 Hooks 만들기 I. useState => 함수 컴포넌트에서도 가변적 상태를 지닐 수 있게 해준다 //Counter.js import { useState } from 'react'; const Counter = () => { const [ value, setValue ] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 }; }; export default Counter; useState 함수의 파라미터에는 상태의 기본값이 들어가며, 여기서는 0이다 이 함수는 호출 시, 배열을 반환하며, 배열의 첫 번째..

22-23/22-23 리액트 스타터 2 2022. 11. 24. 10:00

INDEX 11장 컴포넌트 성능 최적화 1. 많은 데이터 렌더링하기 2. 크롬 개발자 도구를 통한 성능 모니터링 3. 느려지는 원인 분석 4. React.memo를 사용하여 컴포넌트 성능 최적화 5. onToggle, onRemove 함수가 바뀌지 않게 하기 6. 불변성의 중요성 7. TodoList 컴포넌트 최적화하기 8. react-virtualized를 사용한 렌더링 최적화 9. Question 개념 정리 및 코드 문제 컴포넌트 성능 최적화 많은 데이터 렌더링하기 ->크롬 개발자 도구를 통한 성능 모니터링 ->React.memo를 통한 컴포넌트 리렌더링 성능 최적화 ->onToggle과 onRemove가 새로워지는 현상 방지하기 ->react-virtualized를 사용한 렌더링 최적화 1. 많은 ..

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