[React] Effect Hook

Side Effect

• 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. React에서는 컴포넌트 내에서 fetch를 사용해 API를 가지고 오거나 이벤트를 활용해 DOM을 직접 조작할 때 Side Effect가 발생했다고 말한다.

전역 변수 foo를 bar라는 함수가 수정하는 예제

let foo = 'hello';

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

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

위와 같은 예제에서는 bar라는 함수 내에서 함수 외부에 있는 foo라는 전역변수에 영향을 끼치고 있기 때문에 Side Effect가 있다고 할 수 있다.

Pure Function

• 순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 함수의 입력이 아닌 다른 값의 함수의 결과에 영향을 미치는 경우에는 순수 함수라고 할 수 없으며 입력으로 전달된 값을 수정하지 않는다. 전달 인자가 주어질 경우에 항상 똑같은 값이 리턴된다.

Immutable한 메소드 이용한 예제

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

upper('hello') // 'HELLO'

upper 함수는 매개변수로 받은 str의 대문자로 변환한 값을 리턴하고 있으며, 원본 str은 변경되지 않는다. 이는 함수에 매개변수의 입력만으로 함수 결과에 영향을 주고 있으며 전달된 값을 수정하지 않고 있기 때문에 순수 함수라고 할 수 있다.

🤔 Math.random()은 순수 함수가 아니다! 왜일까?

• 어떤 결과값이 예측이 불가능하기 때문에 순수 함수가 아니다! 매번 똑같은 값이 리턴되지 않기 때문이다.

🤔 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해 보자. 이 함수는 순수 함수가 아니다. 왜일까?

• Ajax 요청은 외부 상태를 변경하기 때문이다.

---

Effect Hook

• useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook 입니다. 이 컴포넌트에서 실행하는 Side effect는 브라우저 API를 이용하여, 타이틀을 변경하는 것

useEffect(함수)

• useEffect의 첫 번째 인자는 함수이며, 해당 함수 내에서 side effect를 실행하면 된다.
• useEffect의 두 번째 인자는 배열로, 이 배열에서는 조건을 담고 있다. 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미하므로 배열에는 어떤 값의 목록이 들어가게 된다. 이를 종속성 배열이라고 부른다.