Effect Hook

들어가기 앞서서...

Side Effect

• 함수 내부의 구현이 외부에 영향을 미치는 것을 Side Effect 라고 한다.

let text = 'hello'

function fn () {
  text = 'bye'
}

fn() // 함수내부의 구현이 text 를 변경시키므로 Side Effect를 발생시킨다.

• 위와 같은 형식의 함수뿐만 아니라, Mutable 한 메소드도 Side Effect를 발생시킨다고 볼 수 있다.

Pure Function

• 순수함수(Pure Function)는 함수의 입력만이 함수의 결과에 영향을 미치며, 입력된 원본 데이터를 수정하지 않는 함수를 이야기한다.(immutable)

function fn (el) {
  return el.toUpperCase()
}

fn('hello') // 'HELLO' 

• 순수함수는 Side Effect가 없으며, 특징으로는 인자에 따라 항상 같은 값이 반환된다.→ 멱등성
• 리액트의 함수형 컴포넌트는 순수함수에 속한다.

Effect Hook

• 리액트에서 발생하는 Side Effect 현상을 다루기 위한 Hook.
  → Hook 이란 함수형 컴포넌트에 클래스 컴포넌트에서만 작동하던 기능들을 연동시켜주기 위한 함수로 보면 된다.
• 함수형 컴포넌트는 순수함수이지만, 만약 AJAX 요청이나, 타이머를 사용하는 경우 이를 리액트 입장에서 모두 Side Effect로 취급한다.
  → 비동기 처리
• 우리는 이런 비동기 처리를 다루기 위해 Effect Hook 을 사용한다.
• 혹은 state의 변경으로 매번 업데이트 되는 요소를 원하는 state가 업데이트 될때만 실행시키거나, 최초 렌더링시에만 실행 시킬 수 있도록 할 수 있다.

Effect Hook 사용하기

• 먼저 import 를 사용하여 useEffect 함수를 불러온다.
• useEffect(()=>{ 실행 할 요소 }) 으로 사용한다.
• Effect Hook 은 두번째 인자로 배열을 받을 수 있으며, 해당 배열은 어떤 값이 바뀌는 경우 useEffect 를 사용한다고 할 때, 어떤 값을 의미한다.
  → 이를 종속성 배열(Dependecy array)이라고 한다.

종속성 배열을 지정하지 않은 경우

import { useState, useEffect } from "react";

export default function App() {

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

useEffect(() => {
  console.log(count)
})
// 리렌더링 될때마다 내부의 함수를 실행시킨다.

  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>count</button>
    </div>
  );
}
// 버튼을 클릭할때마다, 리렌더링 되어 매번 Effect Hook 안의 내용이 실행된다.

• useEffect(함수) 인 경우, 컴포넌트가 렌더링 될 때, props가 업데이트 될 때, state 가 업데이트 될 때마다 useEffect 내부의 함수가 실행된다.

종속성 배열을 지정한 경우

import { useState, useEffect } from "react";

export default function App() {

const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);

useEffect(() => {
  console.log(count2)
}, [count2])
// 종속성 배열에 count2 만 작성되어 있으므로, 

  return (
    <div className="App">
      <button onClick={() => setCount1(count1 + 1)}>count</button>
      <button onClick={() => setCount2(count2 + 1)}>count</button>
    </div>
  );
}
// count2를 누를 경우에만 Effect Hook 내부의 함수가 실행된다.
// count1을 누를 경우 리렌더링은 이루어지지만 내부의 함수는 실행되지 않는다.

빈 배열을 작성한 경우

• useEffect(함수 , []) 인 경우, 컴포넌트가 처음 생성되는 경우만 useEffect 함수를 실행한다.

---

+

• 한마디로, 어떠한 Side Effect 가 발생 할 때 제어할 함수를 Hook 내부에 작성해준다.
• Hook을 사용 할 때는 반드시 리액트 함수 최상위에서 선언하여야 한다.
  → 내부의 반복문, 조건문 내부에서 선언 할 수 없다.
• Effect Hook 은 새로운 컴포넌트가 렌더링 될 때마다 실행된다.
• Effect Hook은 Class 형 컴포넌트의 생명주기, componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 봐도 무방하다고 한다.
  → 생명주기에 대해서 더 공부해보기.