오늘한일

어제 간신히 상태 끌어올리기를 이해하고 과제를 다시 진행하였다.
useEffect는 이전에 useState처럼 그대로 받아들이니 생각보다 이해는 빨랐고,
useEffect로 fetch api를 이용하여 데이터를 받아오는 과제를 수행하였다.

Achievement Goals

(이해한대로 작성하였기에 틀릴수도 있습니다. 계속 공부하며 수정해 나가겠습니다.)

• Side effect가 어떤 의미인지 알 수 있다.
• React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
• Side effect의 예를 들 수 있다.
• Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
• Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
  컴포넌트 내에서 네트워크 요청시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.

Side Effect (부수 효과)

먼저 Side Effect는 사용하는 곳에 따라 다양한 의미를 가지고 있다.
일반적으로 Side Effect라는 말을 할 때는 '의도하지 않은 결과'를 의미한다.
코딩에서도 다양한 의미를 가지고있으나, 이번 section에서는
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다.

Pure Function (순수 함수)

순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다.
순수 함수의 특징 중 하나는, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다.
그래서 예측 가능한 함수이기도 하다.
입력된 값이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다.

• 순수함수 조건
  • 동일한 인자가 들어갈 경우 항상 같은 값이 나와야 한다.
  • 부수적인 효과가 일어나면 안 된다.
  • return 값으로만 소통한다.

순수함수

function add(a, b) {
        return a + b;
      }

      console.log(add(10, 5));// 15
      console.log(add(10, 5));// 15

두 숫자가 더해진 값이 나온다는것을 예측 가능하고, a와 b의 값에 영향을 주지 않는다.

• Math.random()은 순수 함수가 아닙니다. 왜일까요?

  • Math.random은 어떤 결과값이 나올지 예측이 불가능하기 때문에 순수 함수가 아니다.

• 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요?

  • 네트워크 상황, 서버상태에 따라 응답코드가 달라지기 때문에 예측이 불가능하다.

React에서 Side Effect

React의 함수 컴포넌트는 순수 함수로 작동한다.
그저 props로 값을 받고 그에 대한 값의 출력만이 있을 뿐이다.

하지만 React로 애플리케이션을 만들때에는 API를 사용하거나 AJAX요청이 필요할경우가 생긴다.
이경우에는 React 입장에서는 모두 Side Effect이다.

React 컴포넌트를 하나의 함수라고 봤을 때
입력받은 값만으로 return을 하는것이 아닌 .외부 API의 값에 의해서 return이 결정되기 때문이다.

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

useEffect

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다.
useState와 함께 리액트의 가장 기본적인 Hook이기도 하다.
문법적 구성은 이렇다.

useEffect(함수, [종속성1, 종속성2, ...])

useEffect의 첫번째 인자는 실행 함수이다.
이 함수 내에서 Side Effect를 실행하면 된다.

• useEffect의 함수는 세가지 조건에서 실행된다.

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

useEffect에 두번째 인자는 종속성 배열이다.
어떤 값의 변경이 일어날 때를 의미하며, 해방 배열엔 어떤 값의 목록이 들어간다.

예를들어서 count라는 state가 있다고 하면 useEffect의 두번째 인자에 [count]를 작성할시,
count가 변경될때마다 첫번째 인자 함수를 실행시킨다.

이러한 조건부 실행에서 기억해야할것이 두가지있다.

1. 빈 배열 넣기 useEffect(함수, [])

   • 컴포넌트가 처음 실행될때 단한번만 실행

2. 아무것도 넣지 않기 (기본 형태)

   • 해당 컴포넌트에 존재하는 모든 state 의 변경 마다 useEffect 를 새롭게 실행
     useEffect(함수)

참고사이트

https://www.inflearn.com/questions/12660
https://velog.io/@chdb57/%E3%85%87%E3%85%87%E3%85%87%E3%85%87%E3%85%87%E3%85%87%E3%85%87%E3%85%87