16.8부터 새로 추가된 기능입니다. class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
State Hook
function Example(){
const [count, setCount] = useState(0);
function onClick = () => {
setCount(count+1);
}
}
JavaScript
복사
useState가 Hook입니다. Hook을 사용해 함수 컴포넌트 안에 state를 추가했는데, 다시 렌더링되어도 그대로 유지됩니다. this.state와 비슷하지만 이전 state와 새로운 state를 합치지 않는다는 점이 차이점입니다.
Hook이란
함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수입니다.
Hook 사용 규칙
•
최상위에서만 Hook을 호출해야합니다. 반복문, 조건문, 중첩된 함수내에서 실행하면 안됩니다.
•
React 함수 컴포넌트 내에서만 호출해야 합니다.