TIL 38일차

리액트 컴포넌트 내에서 AJAX요청하는 과제를 페어와 함께 진행하는 날이다. 우리가 수행해야할 과제는 fetch를 이용해 서버에 AJAX 요청을 진행하는 것이다. api/FlightDataApi.js의 getFlight 함수를 기존 구현 대신에 REST API 호출로 대체해야한다. 이것을 하기 위해서는 Effect Hook을 알아야한다. 상세내용을 노션에 정리후 오늘 수행했던 스프린트 과제를 다시 다운받아 풀어보는 방식으로 공부했다.

 

Side Effect

Side Effect (부수 효과)

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다.

다음은, 전역 변수 foo를 bar라는 함수가 수정하는 예제이다.

let foo = 'hello';

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

bar(); // bar는 Side Effect를 발생시킵니다!

Pure Function (순수 함수)

순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다. 또한 순수 함수는, 입력으로 전달된 값을 수정하지 않는다.

function upper(str) {
  return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable)
}

upper('hello') // 'HELLO'

순수 함수에는 네트워크 요청과 같은 Side Effect이 없다. 순수 함수의 특징 중 하나는, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다. 그래서 예측 가능한 함수이기도 하다.

 

React의 함수 컴포넌트

앞서 배운 React의 함수 컴포넌트는, props가 입력으로, JSX Element가 출력으로 나간다. 여기에는 그 어떤 Side Effect도 없으며, 순수 함수로 작동한다.

function SingleTweet({ writer, body, createdAt }) {
  return <div>
    <div>{writer}</div>
    <div>{createdAt}</div>
    <div>{body}</div>
  </div>
}

하지만 보통 React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다. 이는 React의 입장에서는 전부 Side Effect 이다. React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.

React 컴포넌트에서의 Side Effect

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

 

Today's Key🔑

• 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다.
• 순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다.