Hook의 특징

• 선택적 사용

기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hooks를 사용할 수 있습니다. 하지만 만약에 Hook 가 당장 필요하지 않다면 사용할 필요는 없습니다.

• 100% 이전 버전과의 호환성

Hook은 호환성을 깨뜨리는 변화가 없다.

• 현재 사용 가능

React v16.8.0부터 사용이 가능합니다.

State Hook

useState로 사용하고있는 것이 바로 Hook 입니다. Hook을 호출해 함수 컴포넌트 안에 state 를 추가했습니다. 이 state 컴포넌트가 다시 렌더링이 되어도 그대로 유지될 것입니다.

useState는 인자로 초기의 state 값을 하나 받습니다.

useState는 현재의 state값과 이 값을 업데이트 하는 함수를 쌍으로 제공합니다.

useState를 사용하는 방법

Copycopy code to clipboard
const [age, setAge] = useState(42);

위 코드를 보면 useState 의 인자로 age 는 42 가 되었고 setAge 를 통해 age 의 값을 변경 시킬 수 있습니다.