[React] Hook

Hook

- class 컴포넌트를 작성하지 않아도 state 같은 기능들을 사용할 수 있게 해 준다.

- 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해 주는 함수이다.

- 함수 컴포넌트는 기본적으로 state가 없는 컴포넌트이지만 hook은 react state를 함수 안에서 사용할 수 있게 해 준다.

- class 안에서는 동작하지 않지만 class 없이 React를 사용할 수 있게 해 준다.

- 관련 있는 코드들을 한군데에 모아서 작성 가능하게 해 준다.<-> class에서는 lifecycle method 각각에 코드들을 쪼개서 넣어야 한다.

 

=> 즉, Hook이란 state가 없는 함수 컴포넌트에서 class의 작성 없이도 state를 사용 할 수 있게 해 주는, 그래서 코드를 쉽고 간편하게 볼 수 있도록 해 주는 React의 기능이다.

 

---

Hook의 사용 규칙

1) 최상위 레벨에서만 Hook을 호출해야 한다.

2) React 함수 컴포넌트 내에서만 Hook 호출해야 한다.

* 대부분 'use-' 형태의 이름을 가진다: 컴포넌트가 렌더링할 때 한 번만 생성되기 때문. 

 

---

Hook의 종류

1. useState

: state를 함수 컴포넌트 안에서 사용 할 수 있게 해 주는 함수

 

- state 변수 선언하기

• 인자: state의 초기 값. 객체일 필요 없이 숫자 타입 혹은 문자 타입
• 반환값: state 변수, 해당 변수를 갱신할 수 있는 함수 두 가지의 쌍

import React, { useState } from 'react';

function Example(){
	//새로운 state 변수인 count와 count를 증가시키는 setCount
	const [count, setCount] = useState(0);
    
    return (
    	<div>
        	<p>You clicked { count } times</p>
        	<button onClick={() => setCount(count + 1)}>
            	Click me
        	</button>
        </div>
	);
}

 

2. useEffect

: 함수 컴포넌트에서 *side effect를 수행 가능하게 해 주는 함수. 

- useEffect Hook을 이용해서 컴포넌트가 렌더링 이후 어떤 일을 수행해야 하는지 React에게 알려준다. 이는 넘긴 함수(effect)를 기억 해 뒀다가 DOM 업데이트를 수행한 후에 불러내는 방식으로 이루어진다.

- 컴포넌트 안에 위치함으로써 effect를 통해 state 변수나 prop에 접근을 가능하게 해 준다. 이는 특별한 API 없이도 값을 얻게 해 준다는 특징이 된다.

- 첫 번째 렌더링과 이후의 모든 업데이트에서 수행된다. 

 

     * side-effects: 데이터 가져오기, 수동으로 컴포넌트의 DOM 수정하기 등

 

- useEffect의 예시

import React, { useState, useEffect } from 'react';

function Example(){
	//새로운 state 변수인 count와 count를 증가시키는 setCount
	const [count, setCount] = useState(0);
    
    //문서의 타이틀을 클릭 횟수가 포함된 문장으로 표현
    useEffect(() =>
    	document.title = `You clicked ${count} times`;
    });
    
    return (
    	<div>
        	<p>You clicked { count } times</p>
        	<button onClick={() => setCount(count + 1)}>
            	Click me
        	</button>
        </div>
	);
}

 

이 때, 매번 업데이트마다 호출하게 되면 필요 없는, 혹은 의미 없는 호출을 계속 하게 되면서 성능이 저하 될 수 있다.

그래서, React에서는 성능 저하 방지를 위한 Hook API를 아래와 같이 제공한다. 아래와 같이 사용하면 특정 값들이 리렌더링 시에 변경되지 않으면 effect를 건너뛸 수 있도록 해 준다.

//count state 변수의 값이 바뀔 때만 재실행
useEffect(() => {
	document.title = `You clicked ${count} times.`;
}, [count]);

 

 

 

---

Reference

ko.reactjs.org/docs/hooks-intro.html