[React] React Hook(리액트 훅)에 대해 배워보자

 

🎠 리액트 훅의 개념을 정리하고 리액트에서 어떻게 쓰이는지 알아보고자 한다.

---

1. React Hook(리액트 훅)의 정의

Hook은 React 16.8에 새롭게 추가된 기능이다.

class를 작성하지 않고 state와 다른 React 기능들을 사용할 수 있게 해준다.

함수 컴포넌트에서 React state와 생명주기 기능(lifestyle features)을 연동(hook into)해준다.

 

2. Hook 사용 규칙

1. 최상위(at the top level)에서만 호출해야 한다.
   - 반복문, 조건문, 중첩된 함수 내에서 훅을 실행하면 안된다.
2. React 함수 컴포넌트 내에서만 호출해야 한다.
   - 일반 자바스크립트 함수에서 훅을 호출하면 안된다.

3. Hook 예시

내장된 Hooks를 사용하거나 Hooks를 결합하여 직접 빌드할 수 있다.

 

1. useState

사용자 입력과 같은 정보를 기억하도록 한다.

import React, { useState } from 'react';

function Example() {
	// "count"라는 새 함수 선언
    const [ count, setCount ] = useState(0);
    
    return (
    	<div>
        	<p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
            	Click me
            </button>
        </div>
    );
};

 

• 하나의 컴포넌트 내에서 state Hook을 여러 개 사용할 수 있다.

function ExamplewithManyStates() {
	// 상태 변수를 여러 개 선언
    const [ age, setAge ] = useState(42);
    const [ fruit, setFruit ] = useState('banana');
    const [ todos, setTodos ] = useState([{ text: 'Learn Hooks'}]);
    ...

2. useContext

컴포넌트가 props로 전달하지 않고도 먼 부모로부터 정보를 받을 수 있다.

function Button() {
	const theme = useContext(ThemeContext);
   ...

---

🌸리액트 훅은 useState와 useEffect만 썼었는데 더 많은 훅이 있는 것 같다. 프로젝트를 하면서 한 컴포넌트 안에 있는 정보를 다른 컴포넌트로 옮기기 위해 props를 썼는데 다루는 데이터가 많아지면서 내가 내 코드를 감당하기 힘들었다. useContext를 알았더라면 다르게 전달할 수 있지 않았을까?