Hook
- React 16.8에 새로 추가된 기능
- class를 작성하지 않고도 state와 다른 React 기능들 사용 가능
- 함수 컴포넌트에서 React state와 lifecycle features를 연동할 수 있게 해주는 함수
- 사용 규칙
- 최상위(at the top level)에서만 Hook을 호출해야 함, 중첩된 함수 내에서 Hook 실행 X
- React 함수 컴포넌트 내에서만 Hook을 호출해야 함, 일반 JavaScript 함수에서는 Hook 호출 X
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>
);
}- Hook을 호출해 function component 안에 state 추가
- 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지
- useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공
- 하나의 컴포넌트 내에서 State Hook 여러 개 사용 가능
배열 구조 분해
const [count, setCount] = useState(0);
var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환
var fruit = fruitStateVariable[0]; // 첫 번째 아이템
var setFruit = fruitStateVariable[1]; // 두 번째 아이템- fruit, setFruit 총 2개의 값을 반환
- useState 이용시 2개의 아이템 쌍이 들어있는 배열로 생성
- [0], [1]로 배열에 접근하는 것은 좋지 않음
useEffect
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>
);- 함수 컴포넌트 내에서 side effects를 수행할 수 있음
- side effects : React 컴포넌트 안에서 데이터를 가져오거나, 구독하고, DOM을 직접 조작하는 작업
- 서로 관련있는 코드들을 한 군데에 모아서 작성 가능
- React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말해줌
- React는 우리가 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 이후에 불러낼 것
- clean-up(정리)를 이용하는 effect도 있음 -> 메모리 누수 방지
- 컴포넌트가 마운트 해제되는 때에 정리 실행
참고
🍄🧑🌾