React / part.3 sideEffect

 Side Effect

해당 글에서는 리액트의 중요한 개념 중 하나인  useEffect hook에 대해 다루기전에

반드시 알아야할 sideEffect라는 개념에 대해 다룹니다.

sideEffect는 프로그래밍에서 빼놓을 수 없는 개념입니다.

sideEffect에 대한 해당 글을 읽은 후 useEffect에 대한 다음글을 읽으실 것을 추천합니다.

 

---

1. sideEffect란?

프로그래밍에서의 부작용 즉,

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

 

특히 프로그램을 구성하는 가장 작은 단위인 “함수”에서 자주 사용되는 용어이다.

함수의 본질적인 역할은 input을 받아서 output을 산출하는 것이다.

 

그렇다면 함수의 sideEffect는?

input을 받아서 output을 산출하는 것 이외의 모든 행위를 말한다.

 

외부의 값을 읽어오는 행위

외부의 값을 변경하는 행위

 

 

2. sideEffect를 지양해야 하는 이유

그렇다면 sideEffect를 지양해야 하는 이유가 뭘까?

sideEffect가 있는 함수는 동작 결과를 예측하기 쉽지 않기 때문이다.

직관적으로 결과값을 알 수 없어 함수들의 유지보수가 어렵다.

 

BUT!

프로그래밍에서 외부의 값을 읽어오거나 변경하는 행위를 완전히 배제할 수 없다.

따라서 개발자들은 sideEffect를 최소화 하면서 프로그램을 설계하되,

sideEffect가 필요한 경우에는 반드시 통제 가능하게 만들어서 프로그램의 유지보수에 악영향을 주지 않도록 주의해야한다.

 

3. sideEffect 예시

순수함수 ⇒ sideEffect가 없는 함수

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

input(x)를 받아서 output(x+1)을 산출

이 외의 다른 행위를 하지 않으므로 sideEffect가 없다.

 

 

 

1. 외부의 상태를 읽어올 때

const num = 1;

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

input(x)를 받아서 output(x+num)을 산출

함수 내부의 값이 아닌 외부의 값인 “num”을 읽어오기 때문

함수가 함수 내부의 값을 제외한 나머지 값들을 읽어올 때 ‘side Effect가 있다”고 한다.

 

---

 

2. 외부의 상태를 변경시킬 때

let num;

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

input(x) ⇒ output( num = x+1 )

함수가 함수 내부에 있는 값이 아닌 외부의 값 num을 변경시키고 있기 때문

함수가 함수 외부의 값을 변형 시킬 때 ‘side Effect가 있다”고 한다.

 

---

3. 외부의 값을 변경( 변수 외에 DOM조작 및 console상태 변경 포함)

const printNum = (x) => {
  console.log(x);
};

const changeTitle = (newTitle) => {
  const title = document.getElementById('title');

  title.innerText = newTitle;
};

 외부의 값이라고 하면 변수만을 생각할 수 있지만,

DOM을 조작하고 console에 특정 문자를 출력하는 행위 또한

함수 외부에 존재하는 것의 상태를 변경시키는 것이기에 ‘side Effect가 있다”고 한다.

 

 

 

4. React 에서의 sideEffect

React에서 함수 컴포넌트의 input (state와 props) ⇒ output( JSX )이다.

 

 

함수 컴포넌트에서의 Side Effect

 

Data Fetching

프론트단에서 백엔드 API를 통해서 데이터를 가져오는 행위는 필수적인 행위이다.

이는 곧 외부(백엔드 API)로 부터 데이터를 가져오는 것이기에 side Effect가 있다.

 

DOM 접근 및 조작

react에서 대신 처리해줌으로 선언적 개발이 가능하다.

리액트를 쓰면서 DOM에 직접 접근하는 것은 지양해야 한다.

특정 기능을 구현하기 위해 부득이하게 DOM에 직접 접근해야 할 때 sideEffect가 있다고 한다.

 

구독(Subscribe)

어떤 것을 계속해서 관찰하다가 변화가 발생하면 액션을 취한다.

보편적인 예시는 “시간을 구독”하는게 있다.

특정 시간이 지났을 때 액션을 취하거나,

특정한 시간 주기마다 액션을 취하는 등의 행위를 시간을 구독함으로서 구현할 수 있다.

자바스크립트에서는 setTimeout 또는 setInterval등

이 또한 외부의 값의 변화를 계속해서 관찰하고 거기에 맞춰서 동작을 하는것이기에 sideEffect이다.

 

 

 

---

다음글에서 useEffect에 대해 자세히 다룹니다.

 

 

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!