Hooks는 리액트에 새로 도입된 것으로 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와준다. 리액트 내장 Hooks사용 -> 커스텀 Hooks 만들기    1. useStateuseState: 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. (함수형 컴포넌트에서 상태를 관리) useState 함수의 파라미터에는 상태의 기본값을 넣어 준다. 현재 0을 넣어 주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미다. 이 함수가 호출되면 배열을 반환한다. 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수다. 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링된다.   // Counter.jsimport..

24-25/React.js 1 2024. 11. 29. 10:00

HooksHooks는 리액트 v16.8에 새로 도입된 기능으로 함수로 만든 리액트 컴포넌트에서 클래스로 만든 리액트 컴포넌트의 기능을 이용하도록 도와주는 함수들이다. Hook은 기존의 함수형 컴포넌트에서는 할 수 없었던 작업을 할 수 있다.    앞서 공부한 내용에서 리액트 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있고 state라는 중요한 개념이 있었다. 클래스형 컴포넌트는 생성자에서 state를 정의하고 setState() 함수를 통해 state를 업데이트하고 라이프 사이클에 따라 사용할 수 있었다. 반면, 함수형 컴포넌트에서는 state를 사용하거나 라이프 사이클에 따라 구현할 수 없다. Hook의 사용은 이러한 부분을 보완하고 함수형 컴포넌트에서도 클래스로 만든 컴포넌트의 기능을..

24-25/React.js 2 2024. 11. 29. 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

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

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

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

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

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