-
Notifications
You must be signed in to change notification settings - Fork 0
React Hook
Yongku cho edited this page Feb 9, 2021
·
2 revisions
- 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌
- 로직에 기반을둔 작은 함수로 컴포넌트를 나눌 수 있음
function Example() {
const [count, setCount] = useState(0)
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
)
}
React Class의 componentDidMount
, componentDidUpdate
, componentWillUnmount
와 같은 목적으로 useEffect
를 제공한다.
function Example() {
const [count, setCount] = useState(0);
const [title, setTitle] = useState('');
useEffect(() => {
setTitle(`You Clicked ${count} times`)
});
function onClickButton() {
setCount(count + 1)
}
return (
<div>
<p>{title}</p>
<button onClick={onClickButton}>
Click me
</button>
</div>
)
}
- 최상위에서만 Hook을 호출해야 합니다.
- 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
- React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.
- 일반 JavaScript 함수에서는 Hook을 호출해서는 안된다.