React - Side Effect

Side Effect 란?

함수 내에서 구현한것이 함수 외부에 영향을 끼치는 경우 해당하는 함수는 Side Effect 가 있다고 이야기 함

React 에서는 컴포넌트내에서 fetch 를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 을 직접 조작할때 Side Effect 가 발생했다고 말함

 

순수함수란? ( Pure Function )

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수

함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 주는것은 순수함수라고 부를수 없음

순수 함수는 입력으로 전달된 값을 수정하지 않음

순수함수에는 Side Effect 가 일어나지 않음

즉 순수함수의 특징은 어떠한 전달 인자가 주어지는 경우 항상 똑같은 값이 리턴됨을 보장함

(예측 가능한 함수임)

 

함수의 불변성( Immutable )

여기서 함수의 불변성에 대하여 알아보기전 원시자료형과 참조자료형에 대하여 간단하게 알아보고 가자

 

원시자료형이란?

고정된 저장 공간을 차지하는 데이터를 모두 원시 타입 데이터 라고 함

원시 자료형은 모두 하나의 데이터만을 담고 있음

데이터 크기와는 관계 없이 하나의 변수에는 하나의 데이터만을 담을수 있음!

객체가 아니면서 method 를 가지지 않는 6가지 타임

string, number, boolean, undefined, null, bigint, symbol

 

원시자료형은 값 자체에 개한 변경이 불가능하지만 변수에 다른 데이터 할당은 가능

 

참조자료형이란?

원시자료형이 아닌 모든것을 참조자료형이라고 함

대표적인것은 배열과 객체!

참조 자료형은 여러 데이터를 담을수 있음

 

자 그럼 다시 함수의 불변성에 대해 알아보자

보통 불변성의 의미는 상태를 변경하지 않는것임

불변성이 이야기 하는 상태 변경은 단순한 변수의 재할당을 이야기 하는것이 아니라

메모리에 저장된 값을 변경하는 모든 행위를 의미함 (여기에 변수의 재할당과 같은 행위가 포함되는 것)

 

변수를 통해 메모리에 접근

메모리의 특정 공간에 저장된 값에 조금 더 쉽게 접근할수 있도록 도와주는 기능은 변수임

 

선언을 하고 값을 할당하면 a 에 메모리 주소가 생성이 되고 메모리에 값을 저장함
이때 a = 2 로 값을 재 할당 한다면 메모리 주소는 변하지 않고 값만 변경이 됨 

이것이 상태를 변경하는 행위라고 할수 있음

 

값에 의한 호출과 참조에 의한 호출

 

값에 의한 호출 방식은 함수의 인자로 어떤 변수를 넘길때 해당 변수가 가지고 있는 값을 그대로 복사 하여 함수에게 넘겨주는 방식!

즉 기존 변수가 가리키고 있는 메모리 공간에 있는값을 함수에 인자로 넘기는 것이 아닌 복사를 하여 새로운 메모리 공간을 생성후 넘겨줌

 

string , number , boolean  과 같이 원시 자료형을 사용하는 변수들은 값에 의한 호출 방식을 사용함

 

 

참조에 의한 호출 방식은 변수가 가리키고 있는 메모리 공간의 주소를 넘겨 받는 방식임

변수가 가리키고 있는 메모리 공간에 저장된 배열과 함수의 인자로 받은 배열은 같은 메모리 공간에 저장되어 있는 같은 배열

 

Array, Object 같은 참조자료형은 참조에 의한 호출 방식을 사용

 

즉 함수내에서 배열의 값을 변경하거나 어떠한 행위를 하는것은 원본 배열 자체도 변경이 되는것임

이 경우 메모리 공간에 저장되어 있었던 배열을 직접적으로 변경하는 것이므로 상태가 변경되었다 하며 불변성이 깨졌다고 말할수 있음

 

React 의 함수 컴포넌트

리액트의 함수 컴포넌트는 props 가 입력으로 JSX Element 가 출력으로 어떠한 Side Effect 도 발생하지 않음 

즉 순수 함수로 작동함

---

AJAX 요청이나 LocalStorage 또는 타이머와 같은 React 와 상관없는 API 를 사용하는 경우에 Side Effect 가 발생하다고 말함

React 에서는 Side Effect 를 다루기 위한 Hook 인 Effect Hook 을 제공하여 사용함