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

INDEX 8장 Hooks 1. useState 1.1 useState를 여러 번 사용하기 2. useEffect 2.1 마운트될 때만 실행하고 싶을 때 2.2 특정 값이 업데이트될 때만 실행하고 싶을 때 2.3 뒷정리하기 3. useReducer 3.1 카운터 구현하기 3.2 인풋 상태 관리하기 4. useMemo 5. useCallback 6. useRef 6.1 로컬 변수 사용하기 7. 커스텀 Hooks 만들기 8. 다른 Hooks 9. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해준다. 8.1 useS..

21-22/21-22 리액트 스타터 -2 2021. 12. 27. 13:02

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. 8.1 Hooks useState는 가장 기본적인 Hook로, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook를 사용하면 됩니다. useState를 사용해서 숫자 카운터를 구현해 봅시다. - Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현..

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

import React, {useState, useReducer} from 'react'; function reducer(state, action){ return { ...state, [action.name]: action.value }; } const Info = () => { const [state, dispatch] = useReducer(reducer, { name: '', nickname: ''}); const {name, nickname} = state; const onChange = e => { dispatch(e.target); }; return ( 이름: {name} 닉네임: {nickname} ); }; export default Info; Hooks는 함수형 컴포넌트에서도 상태 관리를..

21-22/21-22 리액트 마스터 2021. 11. 8. 15:00