[React] sideEffect

🔄리액트는 컴포넌트를 어떻게 유지할까?

리액트는 컴포넌트를 순수 함수처럼 실행시킵니다.

 

즉, 컴포넌트를 단순히 함수 호출과 같이 취급합니다.

 

하지만 순수함수는 무엇이고 리액트는 무엇을 위해 순수함수라는 개념을 강조할까요?

---

💧순수함수란?

순수함수는 리액트에만 있는 개념이 아는 자바스크립트 함수에서도 나오는 내용입니다.

 

순수함수란 다음과 같은 특징을 가지고 있는 함수입니다.

• 자신의 일에 집중합니다 : 함수가 호출되기 전에 존재했던 객체나 변수는 변경하지않습니다.
• 같은 입력,같은 출력 : 입력값이 같으면 출력값은 일정합니다.
• 외부 변수 참조나 변경이 없어야합니다

function double(number) {
  return 2 * number;
}

 

 

위 함수는 number라는 매개변수가 들어오면 항상 2를 곱하는 한가지 일만합니다.

 

따라서, number에 같은 입력값이 여러번 들어오더라도 출력값은 일정합니다.

 

그렇기 때문에 위 함수는 순수 합수입니다.

function double(number) {
  console.log(number)
  return 2 * number;
}

 

 

그렇다면 위 함수는 순수할까요?

 

위 함수의 경우 콘솔창에 number를 띄우는 일과 number에 2를 곱하는 일 두가지를 합니다.

 

입력값에 따른 출력값은 일정하지만 두가지 일을 하므로 위 함수는 순수함수가 아닙니다.

 

리액트는 작성되는 모든 컴포넌트가 순수함수일거라 가정합니다

---

🦋 side effect

그럼 순수함수가 아니라면 어떤 일이 일어날까요?

 

이를 사이드 이펙트(의도치 않은 결과)라고 부릅니다.

 

사이드 이펙트는 순수함수의 정의에 반하는 특징을 가지고 있습니다.

 

예를 들어 외부 변수를 참조할 경우 외부 변수의 값이 바뀐다면 함수의 출력값은 의도와 다르게 달라질겁니다.

 

 

사이드 이펙트를 우발하는 코드

• DOM 조각 (document.querySelector)
• 브라우저 API호출 (setTimeout,setInterval)
• 로컬스토리지 접근
• 서버요청 (fetch, url, axios)
• 콘솔 출력
• 상태저장소에 읽기 / 쓰기 (Context API, Zustand, RTK)

let add = 3 function sum(number) { return add + number; }

console.log(sum(2)) // 5

add = 4

console.log(sum(2)) // 6

---

🌀 Side Effect 같아보이는 순수함수

순수함수의 특징 중, 외부 변수를 참조하거나 변형하면 순수함수의 조건에서 벗어나게 됩니다.

 

그런데 이 특징에 반하는 것처럼 생긴 함수가 몇가지 있습니다.

 

1. props

props는 얼핏보면 함수내에 없던 변수니까 외부 변수같아보입니다.

 

하지만 props는 상위 요소에서 하위 요소로 건네주는 데이터이면서, immutable데이터입니다.

 

즉, 변형도 불가능하고 의존성이 추적되는 데이터이기 때문에 외부변수가 아닙니다.

function Cup({ guest }) {  
return Tea cup for {guest}
}

2. 지역변수

지역 변수의 경우 컴포넌트 실행시마다 다시 생성되는 값이기 떄문에

 

컴포넌트의 내부함수 입장에서 보면 외부 변수처럼 보일지라도 사이드 이펙트는 아닙니다.

function MyComponent() {  
let count = 0;  
count++;  
 
return count
}

 

 

위의 지역변수는 렌더링 될때마다 count가 0으로 초기화 됩니다.

 

그렇기 때문에 이전에 Mycomponent가 호출 된 적이 있더라도 독립적으로 관리과 되는 변수입니다.

 

결국 컴포넌트에서 순수함수를 만들려면 렌더링에 대해 이해하고 있는 것이 중요합니다.