[React] Side-effect와 순수함수

"사이드 이펙트"라는 용어들을 종종 듣게 되었다.
사이드 이펙트는 번역하면 "부작용"인데, 음 도대체 어쩌라는거지... 뭔소리지.. 라는 의문을 가졌다.
 
Side-effect란 보통 함수형 프로그래밍에서 주로 쓰이는 용어로 순수 함수와 다른말이다.
 

📌 Pure Function 순수함수

1. 함수의 리턴값은 예측 가능하며 동일하다
2. 함수 외부의 값이나 함수에 전달된 값을 변경하지 않는 함수

위의 이미지처럼 addNum에 a와 b를 넣었을때 리턴되는 값은 3이라는걸 예측할 수 있다. 이를 순수 함수라고 부른다.
이와 반대되는 Side-effect는 무엇일까?
 

📌Side-effect 예측되지 않은 것

Side-effect는 항상 같은 결과를 리턴하지 않는, 즉 예측할 수 없는 특징을 가지고 있다.

예를들어 위의 이미지처럼 random을 추가하게 되면 addNum의 리턴값은 예측할 수 없다.
Side effect의 예시는 아래와 같다.

• 백엔드에 API request 요청 (axios, fetch)

• 브라우저 API와 상호작용 (document, window의 직접적인 사용)
• setTimeout, setInterval

 

📌class 기반의 side-effect

• componentDidMount()
• componentDidUpdate()

React Hook이 나오기 전까지는 componentDidxxx를 통해서 React에서 side-effect 처리를 했다. 클래스 기반 컴포넌트에서 side-effect 처리가 매우 불편했다고 하던데, 나는.. 클래스 컴포넌트가 익숙하기에 너무 옛날 개발자인가 싶었다.
 
아무튼 다음 시간에는 React Hook의 useEffect에 대해서 알아보겠다.
 
 
참고자료

• https://velog.io/@haizel/%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98%EC%97%90-%EB%8C%80%ED%95%B4-%EB%B6%88%EB%B3%80%EC%84%B1%EA%B3%BC-Side-effect
• https://www.daleseo.com/react-hooks-use-effect/
• https://developer-jeongyeon.tistory.com/63