React #15

Side Effect

컴퓨터 과학에서 함수가 결과값 이외에 다른 상태를 변경시킬 때 부작용(Side Effect)이 있다고 말한다 - Wiki_ko

부작용이라고 하면 안 좋은 의미로 들리지만
여기서는 꼭 부정적인 말은 아니다

let foo = 'hello';

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

bar(); // bar는 Side Effect를 발생

bar() 로 foo의 값이 변경 되었기 때문

※ 순수 함수 (Pure Function)
오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
입력으로 전달된 값을 수정하지 않는다

React의 함수 컴포넌트

기본적으로는 props가 입력, JSX Element가 출력인 순수 함수지만

실제 앱에서는 AJAX 요청이나 외부 API를 사용하는 경우가 많이 생긴다

= React의 입장에서, AJAX 요청이나 외부 API를 사용하는 것은

모두 SIDE EFFECT

Effect Hook

useEffect

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

useEffect(함수, [비교할 값]) 로 생겼다

함수 내에서 side effect를 발생시키면 된다

언제 useEffect가 실행되나

[비교할 값] 이 없다면
매 번 새롭게 컴포넌트가 렌더링될 때 Effect Hook이 실행된다

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

[비교할 값]이 있다면
위의 조건 + [비교할 값]이 변했을 때 Effect Hook이 실행

주의할 점
최상위 React 함수 내에서만 Hook을 호출

※ [비교할 값]이 []인 경우?

useEffect가 실행 되는

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

중에서

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)

만 적용된다

처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용

Reference
codestates: [React] 데이터 흐름의 이해와 비동기 요청 처리