[React] Side Effect

Side Effect (부수 효과)

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

 

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

let foo = 'hello';

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

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

 

 

Pure Function (순수 함수)

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

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

upper('hello') // 'HELLO'

 

 

 

 

React의 함수 컴포넌트

React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다.

이런 경우 React의 입장에서 전부 Side Effect 

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

 

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

 

 

React 컴포넌트에서의 Side Effect

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