useEffect

React에서는 데이터가 위에서 아래로, 단방향으로 흐릅니다.

상태 끌어올리기

단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있습니다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못합니다.

그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있습니다.

React가 제시하는 단방향 데이터 흐름의 해결책

상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다

여전히 단방향 데이터 흐름에 원칙에 부합하는 해결 방법입니다. 바로 이것이 "상태 끌어올리기" 입니다.

 

Side Effect (부수 효과)

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

let foo = 'hello';

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

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

Pure Function (순수 함수)

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 순수 함수에는 Side Effect가 없습니다.

또한 순수 함수는, 입력으로 전달된 값을 수정하지 않습니다.

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

upper('hello') // 'HELLO'

 

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 컴포넌트에서의 Side Effect

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

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

 

useEffect

컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook 입니다.

useEffect의 첫 번째 인자는 함수입니다. 해당 함수 내에서 side effect를 실행하면 됩니다. 

useEffect의 두 번째 인자는 종속성 배열입니다. 배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행됩니다. 배열 내의 어떤 값이 변할 때에만, effect가 발생하는 함수가 실행됩니다.

실행 시기

매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행됩니다.

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

Hook을 쓸 때 주의 사항

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