Hooks는 클래스를 사용하지 않고도 함수 컴포넌트에서 상태를 사용할 수 있도록 만들어주는 React의 새로운 기능이자 컨셉이다.
공식문서를 통한 항목을 살피자
State Hook
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>
);
}여기서 useState가 바로 Hook 이다.
Hook을 호출해 함ㅅ ㅜ컴포넌트 안에 state를 추가했다.
이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것이다.
useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다.
우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다.
이것은 class의 this.setState와 거의 유사하지만, 이전 ㄴㅅㅁㅅㄷdhk tofhdns state를 합치지 않는다는 차이점이 있다.
useState는 인자로 초기 state값을 하나 받는다.
카운터는 0부터 시작하기 때문에 위 예시에서는 초기값으로 0을 넣어준 것이다.
this.state와는 달리 setState Hook의 state는 객체일 필요가 없다.
이 초기값은 첫 번째 렌더링에만 딱 한번 사용된다.
여러 state 변수 선언
function ExampleWithManyStates() {
// 상태 변수를 여러 개 선언했습니다!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}Hook
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수이다.
hook은 class안에서는 동작하지 않는다.
대신 class 없이 React를 사용할 수 있게 해주는 것이다.
React는 useState 같은 내장 Hook을 몇 가지 제공한다.
Effect Hook
Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다.
React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount 와 같은 목적으로 제공되자먼, 하나의 API로 통합된 것이다.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// componentDidMount, componentDidUpdate와 비슷합니다
useEffect(() => {
// 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}useEffect를 사용하면, React는 DOM을 바꾼 뒤에 "effect" 함수를 실행할 것이다.
useEffect가 하는 일은?
- useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행하야하는 지를 말한다.
- 리액트는 우리가 넘긴 함수를 기억했다가(이 함수를 'effect'라고 부른다.) DOM 업데이트를 수행한 이후에 불러낼 것이다.
- 위의 경우에는 effect를 통해 문서 타이틀을 지정하지만, 이 외에도 데이터를 가져오거나 다른 명령형(imperative) API를 불러내는 일도 할 수 있다.
useEffect를 컴포넌트 안에서 불러내는 이유는?
- useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수(또는 그 어떤 props에도)에 접근할 수 있게 된다.
- 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것이다.
- Hook은 자바스크립트의 클로저를 이용하여 리액트에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용하여 문제를 해결한다.
Hook 사용 규칙
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다.
-
최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 말아야한다.
-
React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안된다.
(Hook을 호출할 수 있는 곳이 딱 한 군데 더있는데 바로 직접 작성한 custom Hook 안 이다.)
요약(State Hook)
1: import React, { useState } from 'react';
2:
3: function Example() {
4: const [count, setCount] = useState(0);
5:
6: return (
7: <div>
8: <p>You clicked {count} times</p>
9: <button onClick={() => setCount(count + 1)}>
10: Click me
11: </button>
12: </div>
13: );
14: }- 첫 번째 줄: useState Hook을 React에서 가져온다.
- 네 번째 줄: useState Hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어진다. 또한 useState의 인자의 값으로 0을 넘겨주면 count 값을 0으로 초기화 할 수 있다.
- 아홉 번째 줄: 사용자가 버튼 클릭을 하면 setState 함수를 호출하여 state 변수를 갱신한다. React는 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링한다.
요약(Effect Hook)
effect에 정리(clean-up)가 필요한 경우에는 함수를 반환한다.
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});정리(clean-up)가 필요없는 경우에는 어떤 것도 반환하지 않습니다.
useEffect(() => {
document.title = `You clicked ${count} times`;
});이처럼 effect Hook은 두 가지 경우를 한 개의 API로 통합한다.
