함수형 컴포넌트에 기능을 추가할 때 사용하는 함수.
함수형 컴포넌트에서 상탯값을 사용할 수 있고, 자식 요소에 접근할 수도 있다.
규칙 1. 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.
규칙 2. 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다.
useState훅이 반환하는 배열의 두 번째 요소는 상탯값 변경 함수다. 상태값 변경 함수가 호출되면 해당 컴포넌트를 다시 그리며, 그 과정에서 자식 컴포넌트도 같이 렌더링된다.
효율적인 렌더링을 위해 여러 개의 상탯값 변경 요청을 배치로 처리한다.
const MyComponent = () => {
const [count, setCount] = useState(0);
const onClick = () => {
setCount(prev => prev +1);
setCount(prev => prev +1);
}
onClick();
console.log(count) // 2
}
const MyComponent = () => {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
const onClick = () => {
setCount1(count1 => count1 +1);
setCount2(count2 => count2 +1);
}
onClick();
const result = count1 >= count2; // true
}
컴포넌트에서 부수효과를 처리하는 함수이다.
렌더링 결과가 실제 돔에 반영된 후 비동기적으로 호출되고, 컴포넌트가 사라지기 직전에 마지막으로 호출된다.
함수 실행 시 함수 외부의 상태를 변경하는 연산.
ex) API 호출, 이벤트 처리 함수 등록/해제
부수효과 함수는 렌더링할 때마다 호출된다.
useEffect 내에서 부수효과 함수는 함수를 반환할 수 있다. 반환된 함수는 부수 효과 함수가 호출되기 직전과 컴포넌트가 사라지기 직전에 마지막으로 호출된다.
리액트가 제공하는 훅을 이용해서 커스텀 훅을 만들고, 커스텀 훅을 이용해서 또 다른 커스텀 훅을 만들 수 있다.
import { useEffect, useState } from 'react';
const useWindowWidth = () => {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize);
};
}, []);
return width;
}
const WidthPrinter = () => {
const width = useWindowWidth();
return <div>{`width is ${width}`},</div>
돔 요소에 접근하기 위해 ref 속성값을 사용할 수 있다.
돔 요소 혹은 컴포넌트가 생성되면 ref 객체로 접근할 수 있다.
ref객체의 current 속성을 이용하면 자식 요소에 접근할 수 있다.
useEffect 훅 내부에서 부수 효과 함수는 컴포넌트 렌더링 결과가 돔에 반영된 후 호출되므로 돔이 생성된 상태이다.
<select ref={optionRef}>
<option>
</option>
</select>
실전 리액트 프로그래밍 / 인사이트 / 이재승