React Hooks 이용하기

https://reactjs.org/docs/hooks-intro.html

Introducing Hooks – React

Hooks 는 리액트의 function 컴포넌트에서 사용할 수 있다. 간단히 사용방법을 알아보자.

 

React.useState

class 컴포넌트에서 사용하는 state 와 setState 대신 사용하는 것은 React.useState 이다. 

간단한 사용방법을 알아보자.

const [count, setCount] = React.useState(0);

useState() 괄호안에 들어가는 값은 디폴드 값이다. 위의 예제는 count 값으로 0 을 기본 세팅하고 count 값을 수정하기위한 함수로 setCount 를 사용하겠다는 의미이다. class 컴포넌트에서 state 에 setState 로 접근하듯이 각 변수에 접근하여 값을 변경하는 것이다.

변경하고자 하는 state 함수의 첫번째 파라미터값으로 현재 값에 접근 할 수 있다. 아래 두 예제는 결국 같은 의미이다. (엄밀히는 접근하는 변수가 다르겠지만)

setCount(previouseCount => previouseCount++);
setCount(count++);

 

 

React.useEffect

useEffect 는 랜더링 직후에 호출된다. state 나 props 값이 변경 된 경우를 캐치하여 후작업을 하려고 할때 이용하면 좋다.

  React.useEffect(() => {
    // 여기 작업들을 한다.
    // ...
    
    return () => {
      // component unmount 에서 수행해야 할 작업들
    };
  }, []); // 괄호안을 비워두면 첫 랜더링 한번만 호출된다.

 

그렇다면 특정 값만 체크하고싶을때는?

  React.useEffect(() => {
    // 여기 작업들을 한다.
    // ...
    
    return () => {
      // component unmount 에서 수행해야 할 작업들
    };
  }, [props.user, count]); // props.user값과 count 값이 바뀌었을때 호출된다.