react hooks : useState, useEffect

참고 출처: velopert

useState

 

React에서 Functional component와 Class component의 차이점은 Class component는 state를 가지고 있다는 것이 될 것이다.

 

즉 리액트 16.8 이전 버전에서는 Functional component 에서는 상태를 관리할 수 없었지만, 리액트가 업데이트 되면서 Hooks 라는 기능이 도입된 이후로 부터 Functional component 에서도 상태를 관리할 수 있게 되었다.

 

Functional component에서 Hooks로 상태를 관리할 수 있는 함수가 바로 useState 이다.

 

 

useState에서는 상태의 기본값을 파라미터로 넣어서 호출한다.

이 함수를 호출하면 배열이 반환되는데 이 때 첫번째 엘리먼트는 현재 상태, 두번째 엘리먼트는 Setter 함수이다.

그 모양을 코드로 표현하면 다음과 같다.

const [number, setNumber] = useState(0);

//여기서 0은 기본값, number은 현재 상태, setNumber은 state 상태를 변경해주는 Setter 함수인 것이다. 

구조분해 할당을 이용했기 때문에 다음과 같이 표현할 수 있는 것이다.

 

그리고 Setter 함수를 이용해서 state를 바꿀 때는 다음과 같이 사용한다.

setNumber(prevNumber => prevNumber - 1);

혹은 다음과 같이 사용할 수도 있다.

setCount(count - gap);

 

 

 

useEffect

 

그리고 React 에서 사용했던 Life Cycle API (componentDidMount, componentDidUpdate, componentWillUnmount) 는 업데이트 된 리액트 16.8 버전에서 useEffect로 실행할 수 있다.

 

useEffect를 사용할 때는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열(deps) 을 넣는다.

 

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

바로 요렇게!

위의 예시에서는 배열(deps) 가 비워진 상태이다. 이런 경우에는 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수가 호출된다.

 

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, [user]);

그런데 위와 다르게 이렇게 두번째 파라미터 배열에 무언가 값이 있다면? unmount 시에도 호출이 되고 값이 바뀌기 직전에도 호출이 된다.

 

useEffect는 한번에 이해가 되지 않아서 어떤 댓글에 정리해주신 내용을 인용하는 것으로 마무리해보겠다.

1. 화면이 처음 떴을때 실행.
   • deps에 [] 빈배열을 넣을 떄.
   • life cycle중 componentDidmount처럼 실행
2. 화면이 사라질때 실행(clean up함수).
   
   • componentWillUnmount처럼 실행
3. deps에 넣은 파라미터값이 업데이트 됐을때 실행.

   • componentDidUpdate처럼 실행.

 

useEffect에 대해서는 다음 링크가 자세히 설명하고 있다. rinae.dev/posts/a-complete-guide-to-useeffect-ko