React Hooks(리액트 훅스!)의 기본 Part 2

jeonghoheo·2019년 7월 5일
2

Hooks

목록 보기
2/2

React hooks image
Part1에서는 Hook을 통해 Class가 아닌 function(함수)만으로 state를 생성하고 갱신하는 방법을 알아보았습니다.

그러나 우리는 그것을 넘어서 state의 라이프 사이클을 다루고 싶습니다. 그것을 위해 우리는 Effect Hook에 대해 알아보겠습니다.

자 우선 기존에 Class를 통해 라이프 사이클을 다루는 방법을 확인해 보겠습니다.

Ex) Class로 라이프 사이클 다루기

위의 코드는 충분히 잘 작동되는 코드입니다. 그러나 좀 길어보이죠 이것을 Hooks를 사용해 만든다면 어떨까요?

  • useEffect

    Hook으로 라이프사이클을 다루기 위해 우리는 useEffect가 필요합니다.
    바로 예제를 통해 알아봅시다.

Ex) useEffect로 componentDidMount 작업하기

useEffect함수를 마운트되고 한번만 실행하게 하려면 두번째 인자로 빈 배열을 넣어주세요 그렇지 않으면 state값이 업데이트 될경우 다시 한번 렌더링을 해줍니다.

위의 코드에서 확인해보면 useEffect 함수는 컴포넌트가 마운트 된 이후 setTimeout함수를 실행시켜 3초가 지나면 문서의 타이틀을 교체할겁니다.

이런식으로 우리는 Class에서 사용했던 componentDidMount와 동일한 작업을 할수있습니다.

그렇다면 컴포넌트가 업데이트되고 난후에 작동하는 componentDidUpdate는 어떻게 할수 있을까요?

Ex) useEffect로 componentDidUpdate 작업하기

위의 코드를 보면 useEffect함수 두번째 인자에 count를 배열안에 넣어주었습니다. 이렇게 하면 useEffect는 count state를 지켜보다가 count가 갱신되면 첫번째 인자로 넣어주었던 함수를 실행하게 됩니다.

이렇게 우리는 Class에서 다루었던 componentDidmount와 같은 동일한 작업을 Hook을통해 할수있습니다.

이제 우리는 마지막으로 componentWillUnmount에 대해 알아보겠습니다.
거의 사용할 일이 없지만 이것을 사용하지 않으면 버그가 발생하는 경우가 있으니 사용하는 습관을 가지는것이 좋습니다.

Ex) useEffect로 componentWillUnmount 작업하기

위의 코드에서 useEffect부분만 가져와서 자세히 살펴보겠습니다.

우리는 scroll 이벤트를 만들었습니다. 그런데 만약 어떤 이유로 인해 컴포넌트가 지워진다면 우리는 해당 이벤트를 반드시 지워주어야 합니다.

그렇지 않으면 저 이벤트는 계속 남아있게 되어 원치않은 상황을 만들게 될것입니다. 그때 우리는 한번더 함수를 반환해줍니다.
이것이 바로 Class에서 사용했던 componentWillUnmount처럼 동일한 작업을 해줄겁니다.

여기까지 우리는 기본적인 Effect Hook에 대해서 알아보았습니다.

profile
풀스택을 지향하고 프론트엔드 개발을 좋아하는 프론트엔드 개발자 입니다.

2개의 댓글

comment-user-thumbnail
2019년 7월 5일

기초부분은 다시봐도 다시봐도 새롭네요.. 잘보고 갑니다!

1개의 답글