React에서의 useEffect, Life Cycle, 순수함수

함수 방식이 클래스 방식에 버금가는 가능성을 갖게된 중요한 2가지 측면
1. state를 사용할 수 있게 되었다.(useState)
2. 라이프사이클을 다룰 수 있게 되었다.(useEffect)


[1. class 방식에서의 Lify Cycle구현]
클래스 방식에서 React Component를 만들 때, 컴포넌트의 메소드들이 어떤 순서로 호출이 되는가.

1. componentWillMount()
- 랜더되기전에 실행. 컴포넌트가 생성되기 전에(렌더가 호출되기 전에) 처리해야 할 일이 있다면, 이 메소드를 구현하여 해야할 일을 여기에 갖다 놓는다.
2. render()
- 호출되면 마운트가 된다.(화면에 그려진다)
3. componentDidMount()
- 화면에 그려진 다음에 처리해야 할 일.
- 컴포넌트가 생성된 후에 해야할 일을 처리. 네트워크에서 다운받을 것이 있을 때 시간이 오래걸릴 수도 있으니, 먼저 렌더시킨 다음 처리해야 한다.

컴포넌트가 만들어진 다음에는 컴포넌트에 변화가 생길 수 있음 : state가 생기거나, props가 바뀌거나.
그럴때마다 render메소드가 호출된다.
render메소드가 호출되기 전 호출할 필요가 있냐, 없냐를 결정하는
1. shouldComponentUpdate : true리턴하면 render메소드 호출 / false리턴하면 render호출x.
2. true가 리턴되면 componentWillUpdate
3. render() 호출
4. componentDidUpdate

즉, class방식에서는 life cycle방식에 따라 원하는 타이밍에 특정 코드를 호출하고 싶으면 정해진 메소드에 내용을 구현하는 걸 통해 적당한 타이밍에 원하는 코드를 실행시킬 수 있다.
반면에, function방식에서는 불가능하였지만, 이제는 hook을 통해 가능하다.

[2. function방식에서 Lift Cycle구현하기 - useEffect]
function방식에서 컴포넌트가 render된 후, 추가적으로 필요한 작업(componentDidMount, componentDidUpdate)을 처리할 수 있을까.

1. 먼저 import {useEffect} from ‘react’
2. useEffect의 첫번째 인자는 ‘함수’가 들어와야 한다.
렌더가 끝난 다음, 인자로 전달된 함수가 호출되도록 약속되어있다.

3. 최상위에서만 Hook 호출

4. React 함수 내에서 Hook 호출

웹페이지가 ‘처음 렌더가 끝났을 때 실행’(componentDidMount) + ‘렌더가 실행될때마다 실행’(componentDidUpdate)

[3. 그렇다면 이름이 왜 useEffect인가?]
sideEffect가 생략된 말.
sideEffect : 함수 내에서 어떤 구현이 함수 외부에영향을 끼치는 경우, 해당 함수는 side Effect가 있다고 얘기한다.
컴포넌트가 랜더링이 끝난 다음, document.title값을 바꾼다던지. 컴포넌트 자체와는 상관없는 저 멀리있는걸 예외적으로 바꾸는 것.

Side Effect(부수효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect가 있다고 한다.
Pure Function(순수 함수) : 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수

function upper(str) {
return str.toUpperCase(); // str을 수정하지 않는다. str은 여전히 ‘hello’이다.
}

upper(‘hello’) // 함수의 입력(‘hello’)가 함수의 결과에 영향을 준다

함수의 입력이 아닌, 다른 값이 함수의 결과에 영향을 미치는 경우, 순수함수라고 부를 수 없다.
또한, 입력으로 전달된 값을 수정하지 않는다.
어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보잔한다. 그래서 예측 가능한 함수.
순수 함수에는 네트워크 요청과 같은 Side Effect가 없다.


[React의 함수 컴포넌트]
React의 함수 컴포넌트는 props가 입력, JSX Element가 출력으로 나간다.
그 어떤 Side Effect도 없고 순수 함수로 작동한다.
하지만, AJAX요청이 필요하거나, LocalStrorage, 타이머와 같은 React와 상관없는 API를 사용하는 경우 Side Effect를 사용할 수 있다.

React 컴포넌트에서의 Side Effect
- 타이머 사용(setTimeout)
- 데이터 가져오기(fetch API, localStorage)

Side Effect를 적당한 타이밍에 실행되도록 하는 것 : useEffect
아무래도 side Effect니깐.. render후에 실행되게 하는 것.?
useEffect는 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 hook이다.