2022-02-07 Side Effect

Side Effect (부수 효과)

 

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

 

 

Ex1) 전역 변수 foo를 bar라는 함수가 수정하는 예제

let foo = 'hello';

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

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

 

 

 

Pure Function (순수 함수)

 

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수

 

순수 함수는 입력으로 전달된 값을 수정하지 않음

 

 

 

Ex2) 순수 함수의 예제

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

upper('hello') // 'HELLO'

- 순수 함수에는 네트워크 요청과 같은 Side Effect가 없음.

 

또한 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장. 다시 말해 예측 가능한 함수.

 

 

 

질문

• Math.random()은 순수 함수가 아닙니다. 왜일까요?  -> 항상 똑같은 값이 리턴되지 않으므로
• 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해 봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요?

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

 

 

 

 

React의 함수 컴포넌트

 

앞에서 배운 React의 함수 컴포넌트는 props가 입력으로 JSX Elemenet가 출력으로 나감.

 

여기에는 어떤 Side Effect도 없으며, 순수 함수로 작동함.

 

 

Ex3) 순수함수의 예제

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)