SideEffect 란?

 

 

 

Side Effect 

 

: 부작용 === 부수 효과 ( 부정적인 의미 x )

주요한 효과에 따라서 발생되는 부수적인 효과

 

 

 

 

 

 

 

 

 

프로그래밍에서의 SideEffect

 

코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과

프로그램을 구성하는 가장 작은 담위인 '함수'에서 자주 사용되는 용어

input을 받아서 output을 산출하는 것 이외의 모든 행위

 

 

 

 

 

 

 

순수함수

 

const sum = (x) => {
return x+1
}

 

-> x를 받아서 output 을 내는 것 외엔 별 다른 동작이 없다

 

❗️ x 는 외부에서 받는 거니까 순수함수가 아니지 않은가?

-> 인자로 받기 때문에 순수함수가 맞음!

 

 

 

 

하지만 이럴 경우👇엔 순수함수가 아니다

 

 

 

 

 

Side Effect

 

const sum = (x) => {
return num + 1
}
const num = 2

num을 밖에서 받기 때문

 

함수 외부에서 num = 2을 받아오므로 이럴 경우엔 side effect가 있다고 말한다

 

 

 

 

let num;
const num = (x) => { num= x+1 }

 

이런 경우도 👆side effect 가 있다고 한다

함수 내부의 값이 아닌 외부의 값인 'num'을 읽어오고 변경 시키기 때문

 

 

 

 

 

 

SideEffect

: 함수 외부의 값을 읽어오거나 외부를 변경하는 행위

 

 

함수 외부의 값을 변경할 때 sideEffect가 있다고 표현한다

또한 함수에서 받은 값을 그대로 console.log에 찍는 것, dom을 조작하여 콘솔 패널에 문자를 출력하는 것 모두 외부에 있는 콘솔의 상태를 변경시키는 것이기 때문에 sideEffect 가 있다고 한다

 

 

❗️ 그렇다면 sideEffect는 기피해야하는 걸까?

-> yes! 함수의 결과를 예측할 수 없으면 프로그램 동작을 예측하기 힘듬

-> 하지만 sideEffect를 완전 배제하긴 힘들다. 최대한 줄이면서 코드를 짜는 것이 best

 

 

 

 

 

 

React에서의 side effect

 

react에서 렌더링은 state, props를 기반으로 ui 를 그려내는 것이다

ui는 컴포넌트 단위로 구성, 함수 컴포넌트 이용해서 만들 수 있음

 

함수 컴포넌트는 state, props를 통해서 jsx를 만들어내는 것이 본질적인 역할이다

state와 props를 통해서 jsx를 만들어내는 것 외의 모든 행위를 함수 컴포넌트의 side effect 라고 할 수 있겠다

 

 

 

순수함수는 input을 넣으면 정해진 output을 산출하는 것이라 했을 때 간단한 비유 👇

 

input : state, props (state는 인자로 받는 것이 아니기 때문에 다르지만 sideEffect 관점에서 바라볼때 맥락상 넣음)
output  : jsx

 

 

 

 

 

 

 

SideEffect 예시

 

 

data Fetching / DOM 접근 및 조작 / 구독

 

 

 

data Fetching 

-> 프론트엔드가 백엔드 API를 통해서 필요한 데이터를 가져오는 행위는 외부로부터 데이터를 가져오기 때문에  sideEffect다

 

 

dom에 조작

-> react를 쓰는 개발자는 dom을 직접 조작해야하는 일이 드물지만, 특수한 경우 직접 접근해서 가져오기도 한다.

이는 결국 외부의 값을 읽어오고 변경하는 것이기 떄문에 sideEffect라고 한다.

 

 

구독

-> 어떤 것을 바라보다가 변화가 발생하면 특정한 액션을 취하는 것

(내가 구독한 유투버의 새로운 영상이 올라왔다면 그걸 지켜보다 내 메인 피드에 올려주는 것)

 

-> 시간을 구독하는 것 : 특정 시간 주기마다 액션을 취하는 것

-> js 에선 특정한 시간이 지나면 동작을 수행해주는 setTImeout, setInterval 등의 메소드가 있다.