9월 6일 (월) React Side Effect

남이섬·2021년 9월 6일

Side Effect (부수 효과)

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다

Pure Function (순수 함수)

순수 함수 란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다
함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다 또한 순수 함수 는, 입력으로 전달된 값을 수정하지 않는다

순수 함수 에는 네트워크 요청과 같은 Side Effect가 없다 순수 함수의 특징 중 하나는, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장하고 그래서 예측 가능한 함수이기도 하다

질문
Math.random()은 순수 함수가 아닙니다. 왜일까요?
Math.random()은 값을 예상할 수 없기 때문에 순수함수가 아니다

어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요?
fetch API를 통하여 함수의 값이 달라지기 때문에 순수함수라고 볼 수 없다

React의 함수 컴포넌트

React의 함수 컴포넌트는, props가 입력으로, JSX Element가 출력으로 나간다. 여기에는 그 어떤 Side Effect도 없으며, 순수 함수로 작동한다

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

하지만 보통 React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage(데이터 가져오기) 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우, 이는 React의 입장에서는 전부 Side Effect 이다.

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

Effect Hook

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

API

useEffect(함수)

useEffect의 첫번째 인자는 함수이다.
해당 함수 내에서 side effect를 실행하면 되며, 이 함수는 다음과 같은 조건에서 실행된다

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

Hook을 쓸 때 주의할 점

최상위에서만 Hook을 호출합니다.
React 함수 내에서 Hook을 호출합니다.

Effect Hook (2) - 조건부 실행

조건부 effect 발생 (dependency array)

useEffect의 두 번째 인자는 배열이다
이 배열은 조건을 담고 있다 여기서 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미한다 따라서, 해당 배열엔 어떤 값의 목록이 들어간다. 이 배열을 특별히 종속성 배열이라고 부른다

API
useEffect(함수, [종속성1, 종속성2, ...])

useEffect의 두 번째 인자는 종속성 배열이다
배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행된다

단 한번만 실행되는 Effect 함수

1. 빈 배열 넣기
useEffect(함수, [])

2. 아무것도 넣지 않기 (기본 형태)
useEffect(함수)

(2번) 기본 형태의 useEffect는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 effect 함수가 실행된다

(1번) 빈 배열을 useEffect의 두 번째 인자로 사용하면
이 때에는 컴포넌트가 처음 생성될때만 effect 함수가 실행된다
이것이 언제 필요할까, 대표적으로 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용할 수 있다