Side Effect

Rendering in React

React에서 function component의 rendering이란 state, props를 기반으로 UI요소를 그려내는 행위를 말한다. rendering 결과물은 UI 요소이며 JSX 문법을 통해 화면에 어떻게 그려낼지 알 수 있는 Component이다. rendering 결과물에 영향을 주는 요소는 state와 props이다.

(state, props) => UI, input(state, props) => output(UI)

// UI = render(state, props)
[
  { id: 1, comment: 'hello'},
  { id: 2, comment: 'react'},
]

⬇️

// (state, props) => JSX
<p className='comment'>
  <span>hello</span>
</p>
<p className='comment'>
  <span>react</span>
</p>

부작용, 부수 효과라고도 불린다. Side Effect는 일상 생활의 맥락에서는 부정적인 의미로 사용되는 경우가 많다. 예를 들어 "감기약을 먹었는데 졸음이 오는 부작용이 있다"고 표현하는 경우가 이런 용법에 해당된다. 하지만 프로그래밍 측면에서는 Side Effect는 단순히 부정적인 의미로만 사용되지는 않는다. input-output 이외의 다른 값을 조작한다면, 이 function에는 Side Effect가 있다고 표현한다.

let count = 0;

function greetWithSideEffect(name) { // Input
  count = count + 1; // Side Effect
  
  return `${name}, Hello!`; // Output
}

위 코드에서 greetWithSideEffect()라는 함수는 이름을 받아 인삿말을 return하는 function이다.

greetWithSideEffect()는 단순히 input과 output만 존재하는 함수가 아니다. 실행하는 중간에 function 외부에 있는 count라는 변수를 조작한다. function의 결과값 이외의 다른 state를 변경시키는 행위이므로 Side Effect가 있다고 할 수 있다.

Side Effect는 React의 function component에서도 일어날 수 있다.

function component의 input이 state, props이고, output이 UI이다. 그렇다면 function component의 Side Effect는 state와 props를 받아서 UI를 그려내는 것 이외의 행위라고 볼 수 있다.