Hook2 리액트의 추가 훅 (React Additional Hooks) 이전 포스팅인 리액트의 기본 훅에서 이어집니다. 리액트의 추가 훅 지난번에 소개한 리액트의 기본 훅 세 가지에 더해, 리액트에서는 총 일곱 가지의 추가 훅을 제공합니다. 추가 훅은 기본 훅들에 약간의 변경을 더하거나, 특별한 경우에 사용할 수 있도록 설계되었습니다. 하나씩 알아보겠습니다. useReducer import { useReducer } from 'react'; const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer는 useState를 대체하는 훅입니다. useState가 단순히 상태를 선언하고, setState 함수를 반환해 준 것에 더해서 useReducer는 다양하고 복잡한 로직들을 dispatch를 통해 처리.. 2022. 5. 17. 리액트의 기본 훅 (React Basic Hooks) 훅의 등장 리액트가 함수형 컴포넌트를 지원하기 시작하며 사람들은 기존의 길고 복잡한 클래스 컴포넌트에서 벗어나 간단한 함수로도 컴포넌트를 만들 수 있었습니다. 하지만, 함수에는 고질적인 문제점이 있었습니다. 바로 함수는 자신의 상태를 가질 수 없다는 것입니다. 함수가 상태를 가질 수 없다보니, 클래스 컴포넌트가 할 수 있던 다양한 작업들을 수행하기가 어려웠습니다. 이 문제를 해결하기 위해 등장한 기술이 바로 훅(Hook)입니다. 훅은 컴포넌트에서 상태를 다루는 작업들을 추상화시킨 로직들의 집합입니다. 클래스 컴포넌트에서 사용하던 생명 주기 메서드와 같은 대부분의 상태 관련 기능들을 함수형 컴포넌트에서도 훅을 통해 사용할 수 있습니다. 리액트 훅 이 글이 작성된 시점은 React 18.0.0 버젼을 기준으.. 2022. 5. 13. 이전 1 다음
