Side effect

함수내에 있는 어떤 코드가 함수 외부에 영향을 미칠대 Side Effect가 있다고 이야기한다. 아래와 같은 경우다.

let apple = 'red'

function color() {
  apple = 'green'
}

color(); // 이때 color은 Side Effect를 발생시킨다.

Pure Function(순수 함수)

• 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다.
• 함수동작시 매개변수가 아닌 외부의 변수등이 결과에 영향을 미치면 순수함수가 아니다.
• 순수함수는 전달 받은 값을 수정하지 않는다(Immutable).
• 같은 매개변수를 받을때 항상 같은 값을 리턴하기때문에 예측 가능한 함수이다.

React 함수 컴포넌트

리엑트 함수 컴포넌트는 순수함수지만, React와 상관없는 API를 사용하는 경우 React입장에서는 side effect가 발생한다고 볼 수 있다. 이럴때 Side Effect를 다루기 위한 Effect Hook을 제공한다.

Side Effect in React

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

useEffect

언제 실행되는가?

렌더링이 될 때 실행된다.
렌더링이 되는 경우는 다음의 경우다.

• 컴퍼넌트 생성 후
• 컴포넌트에 새로운 prop가 전달되는 경우
• 컴포넌트 상태(state)가 바뀌는 경우

조건부 실행

useEffect(function,[종속성1, 종속성2, ...]), useEffect는 첫번째인자로 함수를 받고, 두번째 인자로 배열을 받는다. 이때 두번째 인자인 배열내의 어떤 값이 변하는 경우에만 첫번째 인자인 함수가 실행된다.
만약 두번째 인자에 빈배열을 넣게 된다면?
useEffect(function,[])의 형태로 사용하게 되면 컴포넌트가 처음 생성될 때만 첫번째 인자인 함수가 실행된다. 이런형태로 사용하는 경우는 처음 한번만 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요 없을 경우가 대표적이다.

---

항상 그렇지만 어찌어찌 스프린트는 다 푸는데.. 개념이 안잡힌다.. 이럴땐 정말 진도가 느려진다.