[React] 부수 효과 (Side Effect)

03.10.2024

1. 리액트에서 부수 효과란

영어에서 Side Effect의 정의는 부작용에 가깝다. 본래 원했던 효과가 아닌 다른 효과가 부수적으로 딸려온다는 의미이다.

그러나 리액트에서 Side Effect란 그저 부수적인 효과를 의미한다.

 

"부수적인 효과라니, 그건 에러 아닌가요?"

 

아니다. 다시 정리하자면 에러와 같이 내가 짠 코드가 원하는 대로 동작하지 않는 게 아니고, 코더가 함수 등에 본래 메인 역할 외에 다른 효과를 넣는 것이다.

코드 예시를 보면 이해가 좀 더 빨라질 것 같다.

---

// Ex 1
const increment = (num) => {
	console.log("input", num);	// Side Effect
	return num + 1;
}

increment(1);

// Ex 2
const num2 = 30;
const add = (num) => {
	return num + num2		// Side Effect
}

[코드] JavaScript에서의 side effect 예시 코드

---

 

2번 코드같은 경우 input과 output 외의 다른 값을 사용했기 때문에 side effect를 일으키는 함수라고 할 수 있다.

이러한 개념을 리액트의 컴포넌트로 확장시켜 생각을 해보면 다음과 같은 정의를 얻을 수 있다.

리액트의 함수 컴포넌트에서의 부수 효과란 렌더링이 아닌 외부세계에 영향을 주는 행위이다.

 

이해를 돕기 위한 사진을 한 번더 첨부한다.

[이미지] Side Effect in React

2. Isolated Side Effect

이러한 부수효과를 잘 관리하려면 어떻게 해야할까?

바로 부수 효과들을 '격리'하는 것이다. (Isolated Side Effect)

쉽게 말하면 리액트에서는 부수효과들을 useEffect 안에서만 쓰라고 권장이 되고 있다.

대표적으로는 아래와 같은 상황들이 있다.

• API 호출
• 전역 상태 관리
• localStorage 조작
• 타이머 및 interval 관리
• 실시간 데이터 구독 관리

3. 이렇게 어려운데 effect를 어떻게 써요...

여기까지 읽었다면 부수 효과에 대한 두려움이 생길 것 같다. 

그러나 전혀 그럴 필요 없다. 다음과 같은 이유에서다.

• 부수효과는 적을수록 편하지만, 부수 효과 없이 유용한 프로그램은 단 한 개도 만들 수 없다.
• 중요한 것은 부수 효과를 어떻게 관리할 것인가 이다.
• 리액트에서는 부수효과를 격리하고 외곽으로 밀어낸다.
• 결론: 그러니 부수효과를 두려워하지 말자!

4. 마치며

세 차례에 걸쳐서 좋은 리액트 코드에 대해 알아보았는데 많은 것을 새로 리마인드 하고 얻어갈 수 있어서 좋았던 것 같습니다.

리액트 개발자들 모두 파이팅입니다 ㅎㅎ