Side effect가 어떤 의미인지 알 수 있다.
React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다.
Side effect의 예를 들 수 있다.
Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.
🏀Side Effect (부수 효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 말할 수 있다.
React에서 Side Effect가 발생했다고 말하는 경우
1. 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나
2. 이벤트를 활용해 DOM 직접 조작할 때
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'
Q. Math.random()은 순수 함수가 아니다. 왜일까?
✅ Math.ramdom() 같은 메서드는 동일한 입력에도 다른 출력이 나올 수 있으므로 순수 함수가 아니다.
Q. 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해 보자. 이 함수는 순수 함수가 아니다. 왜일까?
✅ 어떤 함수가 서버에 네트워크 요청을 보낸다면 이로 인해 서버의 데이터에 Side Effect를 일으킬 수 있고, 이에 따라 해당 함수는 순수 함수가 아니다.
🏀React의 함수 컴포넌트
보통 React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다.
➡ 이러한 것들은 React의 입장에서는 전부 Side Effect!!!
React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공하고 있다.
🏅React에서의 sideEffect
타이머 사용 (setTimeout)
데이터 가져오기 (fetch API, localStorage)
🏀Effect Hook
useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook
useEffect의 첫 번째 인자는 함수. 해당 함수 내에서 side effect를 실행하면 된다.
🏅useEffect는 언제 실행되는가?
- 컴포넌트 생성 후 처음 화면에 렌더링(표시)
- 컴포넌트에 새로운 props가 전달되며 렌더링
- 컴포넌트에 상태(state)가 바뀌며 렌더링
➡ 이와 같이 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행
// 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, state가 업데이트 될 때마다 실행 useEffect(() => { console.log(몇 번 호출될까요?) }) // 컴포넌트가 처음 생성될 때만 함수가 실행 useEffect(() => { console.log(몇 번 호출될까요?) },[]) // dep이 업데이트 될 때마다 실행 useEffect(() => { console.log(몇 번 호출될까요?) },[dep])
🏅Hook 사용시 주의점
- 최상위에서만 Hook을 호출하도록 하자
- 반복문, 조건문 안에서는 X
- React 함수 내에서만 Hook을 호출하도록 하자.
🏀조건부 effect 발생 (dependency array)
useEffect의 두 번째 인자는 배열. 이 배열은 조건을 담고 있다.
➡ 여기서 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미
따라서, 해당 배열엔 어떤 값의 목록이 들어가고,
이 배열을 특별히 종속성 배열(Dependency Array)이라고 부른다.
useEffect(함수, [종속성1, 종속성2, ...])
- 배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행된다
1. 두번째 인자에 아무 값도 넣지 않는 경우(기본 형태)
useEffect(함수)
➡ 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 첫번째 인자의 함수 실행
2. 종속성 배열에 아무 값도 넣지 않는 경우 즉, 두번째 인자로 빈배열을 넣는 경우
useEffect(함수, [])
➡ 컴포넌트가 처음 생성될 때만 effect 함수 실행
처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때 주로 사용된다.
React에서는 이러한 Ajax 요청을 처리할 때, Side Effect를 최소화하기 위해서 Effect Hook을 사용!
만약 훅을 사용하지 않고 네트워크 요청을 하면 그 동안에 페이지가 멈추거나 깜빡일 수 있다.
