React hooks

돈을 주는 곳에서는 Vue로만 개발하고 있다 보니 자연스럽게 잊고지냈던 리액트
시간 날 때마다 하자라고 다짐했지만 늘 그렇듯 시간이 날리가없 아니 하지않았...
그나마 늘 옆에 계시는 분은 리액트와 싸우다 보니 그것을 보며 리액트의 발전을 체감하고 있었다.

⚓ Hook

Hook는 Class없이 React 기능들을 사용하는 방법을 알려줍니다.

공식문서에서 처럼 hook은 class 없이도 React 기능들을 사용할 수 있게 해주는데

function Example(props) {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

component들은 위와 같이 사용이 가능하다.

Hook은 class 안에서 동작하지 않으며 또 class를 작성하지 않고 사용할 수 있다.

useState

useState 는 가장 기본적인 Hook 으로
함수형 컴포넌트에서도 “state” 를 사용 할 수 있게 해준다.

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

state 를 가져올때도 간편하게

<p>You clicked {this.state.count} times</p>

// 더이상 this.state는 

<p>You clicked {count} times</p>

useEffect

useEffect는 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook

리액트의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.

count 값이 업데이트 될 때 실행

 useEffect(() => {
    console.log(count);
  }, [count]);

Vue의 watch와 비슷하지만 useEffect는 렌더링 직후에 실행된다!

🙌 hook 규칙

1. 최상위에서만 hook을 호출해야 한다.

• 최상위에서 호출함으로써 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로
  hook이 호출되는 것이 보장된다.

2. React 함수 내에서 hook을 호출 하기.