React hook

✏️Hook

React 에는 Hook 이라는 기능이 있다. 16.8 버전 이후에 새롭게 추가된 것

인데 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있

어서 아주 편리하게 이용하는 것 같습니다.

• function component 에서 state 을 가질 수 있다.
  다음 함수는 react.org 에서 나오는 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>

);
}

• 버튼을 클릭하면 값이 증가하는 방식이며, 여기서 useState 가 바로 우리

가 사용하게될 Hook 이라는 것입니다. setState와 상당히 유사한 형태를 띄

게되며, 차이점이라곤 이전 state와 새로운 state 를 합치지 않는다는 점이

있다. useState 는 초기인자로 0을 받기 때문에 카운터가 0부터 시작하게 되

는것입니다.

• useEffect 라는 훅도 존재하는데 이를 사용하면 함수 컴포넌트에서 side

effect를 수행할 수 있게 됩니다. 데이터를 가져오고, 구독 설정하고,

React 컴포넌트의 DOM을 수정하는 것까지 모두 side effects 안에 들어갑

니다.