What is Side Effect?

Rendering in React

React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위입니다.

렌더링의 결과물은 UI 요소, 그러니까 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들이라고 할 수 있습니다. 렌더링 결과물에 영향을 주는 요소는 state와 props입니다.

이를 달리 표현하면 (state, props) ⇒ UI 라고도 표현할 수 있습니다. 즉, input(state & props)에 따라 다른 output(UI)을 표현하는 함수(function)와도 구조적으로 동일합니다.

위 그림은 왼쪽에서 출발한 데이터가 render라는 함수를 거쳐 오른쪽의 JSX 요소로 리턴된 예시입니다.

1-2. Side Effect

부작용, 부수 효과라고도 부르는 Side Effect는 일상 생활의 맥락에서는 부정적인 의미로 사용되는 경우가 많습니다. 예를 들면 "감기약을 먹었는데 졸음이 오는 부작용이 있다"고 표현하는 경우가 이러한 용법에 해당합니다.

하지만 프로그래밍 측면에서의 Side Effect는 단순히 부정적인 의미로만 사용되지 않습니다.

아래 인용처럼 함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect(부수 효과) 가 있다고 표현합니다.

💬 컴퓨터 과학에서 함수가 결과값 이외에 다른 상태를 변경시킬 때 부작용이 있다고 말한다. (wikipedia)

다음 코드를 보겠습니다.

**let count = 0**

function greetWithSideEffect(name) { // Input
	count = count + 1 // Side Effect!

	return `${name}님 안녕하세요!` // Output
}

greetWithSideEffect() 라는 함수는 이름을 받아 인삿말을 리턴하는 함수입니다.

하지만 이 함수는 단순히 input과 output만 존재하는 함수가 아닙니다. 실행하는 중간에 함수 외부 세계에 있는 count라는 변수를 조작합니다. 이는 함수의 결과값 이외의 다른 상태를 변경시키는 행위에 해당하므로 Side Effect 가 있다고 할 수 있습니다.

이러한 Side Effect는 React의 함수 컴포넌트에서도 일어날 수 있습니다.

앞서 함수 컴포넌트의 Input이 state, props이고, output이 UI라고 설명한 바 있습니다. 그렇다면 함수 컴포넌트의 Side Effect는 state와 props를 받아서 UI를 그려내는 것 이외의 행위라고 할 수 있습니다.

그렇다면 함수 컴포넌트에서의 Side Effect는, 렌더링이 아니고 외부 세계에 영향을 주는 어떠한 행위입니다.

대표적으로 Data Fetching, DOM에 직접 접근(ex. Event Listener 등록), 구독(ex. setInterval)과 같은 행위들이 있습니다. 이들은 모두 컴포넌트에서 꼭 필요한 대표적인 Side Effect 들입니다.