[ React ] Side Effect & Effect Hook 알아보기

Side Effect

let foo = 'hello';

function bar() {
  foo = 'world';
}

bar(); // bar는 Side Effect를 발생시킵니다!

• 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 Side Effect가 있는 함수라고 부른다.

 

React 컴포넌트의 Side Effect

• 타이머 사용(setTimeout)
• 데이터 가져오기(fetch API, localStorage)

React 애플리케이션을 작성할 때에 AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은
React와 상관없는 API를 사용하는 경우가 발생할 수 있다.

이는 React 입장에서 보면 전부 Side Effect로 볼 수 있다.

 

Side Effect가 아닌 React의 함수 컴포넌트

function SingleTweet({ writer, body, createdAt }) {
  return <div>
    <div>{writer}</div>
    <div>{createdAt}</div>
    <div>{body}</div>
  </div>
}

Side Effect가 아닌 Pure Function(순수 함수)

function upper(str) {
  return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable)
}

upper('hello') // 'HELLO'

• 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 순수 함수라고 부른다.
• 순수 함수는 입력으로 전달된 값을 수정하지 않음

---

Effect Hook

• React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.

 

Effect Hook은 다음과 같이 매번 새롭게 컴포넌트가 렌더링 될 때 실행된다.

• 컴포넌트 생성 후 처음 화면에 렌더링(표시) : mount
• 컴포넌트에 새로운 props가 전달되며 렌더링 : unmout
• 컴포넌트에 상태(state)가 바뀌며 렌더링 : update

 

Hook을 쓸 때 주의할 점

• 최상위에서만 Hook을 호출
• React 함수 내에서 Hook을 호출

 

useEffect 함수

• 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다.
• 이 컴포넌트에서 실행하는 Side effect는 브라우저 API를 이용하여, 타이틀을 변경하는 것이다.
• useEffect의 첫 번째 인자는 함수이다.(해당 함수 내에서 side effect를 실행)

 

useEffect  Hook 형태

import React, {useEffect} from 'react';
  useEffect(() => {
},[]);

• 기본 형태 : useEffect( function, deps )

첫번째 인자  :  function (콜백 함수)

• 기본적으로 인자로 콜백 함수를 받는다.
• 콜백 함수 내부에 우리가 원하는 작업을 작성하면 된다.

두번째 인자  :  dependency array(종속성 배열)

• 안에는 검사하고자 하는 특정 값 or 빈 배열을 집어 넣는다.

배열 형태이며, 배열은 조건을 담고 있다. 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미한다.

이 배열엔 어떤 값의 목록이 들어간다. 또한, 이 배열을 특별히 종속성 배열이라고 부른다.

 

useEffect   사용 방법 예제 보기

1. 컴포넌트내에서 최초1회로 호출하고 싶을 때

상태변화에 상관없이 함수를 1회만 호출하고 싶다면 아래와 같이 작성해야한다.

 useEffect(() => {
    init();
  }, []); // [] 내용물이 없으면 최초 1회만 호출

2. 특정 상태값(useState)에 대해서만 값의 변동 발생시 호출하고 싶을때

currentTime, totalTime 이라는 이름의 상태 훅(State Hook)값이 새로 정의될 때마다 호출된다.
다른 상태값이 변화할땐 해당 영역은 호출하지 않는다.

 useEffect(() => {
    if(currentTime >= totalTime) {
      setNext();
    }
  }, [currentTime, totalTime]); 
  // currentTime 또는 totalTime 상태 훅(State Hook)값이 변경될때마다 useEffect 안의 내용이 호출됨.

3. 모든 상태값 변동시마다 호출하고 싶을때

컴포넌트안의 모든 상태 훅(State Hook) 값이 변경될때마다 호출하고싶다면 아래와 같이 작성하면 된다.

  useEffect(() => {
    console.log('always call.')
  }); 
  컴포넌트내 상태 훅에 변동발생시마다 호출

4. useEffect()는 컴포넌트내 여러개 선언할 수 있다.

한 컴포넌트내에 여러 개 호출할 수 있다.

function MusicPlayer() {

  const [totalTime, setTotalTime] = useState(1);
  const [currentTime, setCurrentTime] = useState(0);
  
  useEffect(() => {
    init();
  }, []); // [] 내용물이 없으면 최초 1회만 호출

  useEffect(() => {
    if(currentTime >= totalTime) {
      setNext();
    }
  }, [currentTime, totalTime]);
  
}