[React] Pure vs Impure Functions | Side Effect

리액트 코드 작성이

impure function과 pure function 둘 다 사용한다. 

둘의 개념을 이해하고 가도록 하자.

 

Pure function 

pure function은

함수가 입력받은 파라미터로만 연산되는 경우를 말한다. 

A function is considered pure when everything that dictates what it returns is completely isolated from what gets passed into it. This is very important because this function return should solely be dependent on the props being passed. 

 

 

함수를 정의한 후 

 

 

호출 하면 

파라미터로 2와 4가 들어가서 그대로 6이 나온다. 

 

 

 

 Impure Function 

여기서 함수 파라미터에 없는 외부 변수를 받아

계산에 집어 넣으면 impure가 된다.

 

완전히 isolated 된 것이 아닌 함수이다. 

 

 

함수 안에 c 까지 받아서 계산을 하면 

2 + 4 + 3 

 

여기서 c의 값을 5로 변경되었을 시 

 

 

똑같은 a, b 값을 입력 했더라도 리턴 값은 당연히 변한다. 

이 처럼 함수 외부의 인자가 함수 내부에 영향을 주는 것을

impure function이라고 한다.

코드 이해하기 쉽도록 pure function을 사용해야 한다. 

 

 

 

pure function을 사용하지 않으면

side effect가 발생한다. 

 

 

 side effect 

함수 scope 밖 외부에서 정의된 c를 

함수 안에서 c 의 값을 변경하게 되는 것을 side effect라고 한다. 

 

함수 안에서 c의 값이 변경되었다.

 

많은 자바스크립트 개발자들이 함수형을 쓰는 것을 좋아한다. 

argument를 보면 아웃풋이 무엇일지 예상이 가능하기 때문이다. 

외부의 변수가 함수 안으로 들어오면 내용을 파악하기 어렵다. 

 

 

지금 부터 주로 사용할 리액트 코드는 impure function이다. 

Hooks를 이용해서 impure function을 사용할 것이다. 

Hooks로 side effect가 발생한다. 

 

 

React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다.

예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(답답함)을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다.

 

→ 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다.

→ Hook은 이 side effect 를 수행하는역할을 한다. side effect 를 줄여 그냥 effect 라고 한다. 그래서 훅의 이름은 useEffect 가 된다.

 

 

 -- 출처 --

 

Udemy MTZ React 강의 

https://devbirdfeet.tistory.com/52 [새발개발자:티스토리]