Note

useEffect Hook의 useEffect는 클래스형 컴포넌트의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. useEffect는 기본적으로 매 렌더링 이후에 실행됩니다. 기본 예시는 다음과 같습니다. useEffect 예시 import React, {useState, useEffect} from "react"; const HookUseEffect = (props) => { const [description, setDescription] = useState(''); useEffect(() => { // do effects setDescription('This is useEffe..

useState Hook에서는 컴포넌트 안에서 상태를 관리할 수 있도록 하기 위해 useState 라는 API를 제공합니다. useState는 상태 값과 상태를 업데이트할 수 있는 함수 쌍을 반환합니다. 예시 코드는 다음과 같습니다. useState 예시 import React, {useState} from "react" const HookUseState = (props) => { // count 라는 상태를 만들고, 0을 초기값으로 사용합니다. const [count, setCount] = useState(0); const handleButtonClick = () => { // 카운트 값을 1 증가하여 상태를 업데이트합니다. setCount(count + 1) }; return ( 클릭 수: {coun..

소개 React의 Hook은 클래스형 컴포넌트에서의 복잡성(this의 scope)과 라이프사이클 메소드의 복잡성 등 클래스형 컴포넌트의 여러 문제점을 보완하기 위해 나왔습니다. React 공식문서에 따르면 Hook은 다음과 같은 특징을 가지고 있습니다. 기존의 코드를 다시 작성할 필요 없이 일부 컴포넌트 안에서 Hook을 사용할 수 있습니다. 호환성을 깨뜨리는 변화가 없습니다. 기존의 React 컨셉을 대체하지 않고 좀 더 직관적인 API를 제공합니다. 공식문서에 따르면 React에서 클래스형 컴포넌트를 제거할 계획이 없고 계속 지원할 예정이니 Hook이 당장 필요하지 않다면 Hook을 사용할 필요는 없다고 합니다. 또한, 기존의 코드를 Hook을 사용해서 리팩토링하는 것 보다는 Hook이 필요하다면 점..