S2 unit9 | Eftect Hook : Side Effect 제어

📌 Side Eftect (부수 효과)

: 함수 내의 구현이 함수 외부에 영향을 미치는 것

 

let foo = 10;

function sum(a) {
	foo = foo + a;
    }

함수 sum은 함수 외의 변수 foo를 변경시키므로 부수효과가 있는 함수이다.

 

 

React에서의 Side Eftect

• API (setTimeout) 사용
• 이벤트 사용하여 DOM 직접 조작
• 데이터 가져오기 (fetch API, localstorage)

 

 

📌 순수 함수

: 오직 함수의 입력만이 함수의 결과에 영향을 미치는 함수, 부수효과를 가지지 않은 함수, 예측이 가능한 함수

 

• 함수 외부를 변경시키지 않음
• 어떠한 전달 인자가 주어질 경우 항상 같은 값을 반환함
• 인자로 전달된 값을 수정하지 않음

 

 

🙋‍♀️ Math.random()은 순수 함수일까?

Math.random은 같은 전달 인자가 주어져도 다른 값을 반환할 수 있기 때문에 순수 함수가 아니다.

 

 

🙋‍♀️ AJAX요청은 순수 함수일까?

AJAX요청은 외부환경의 영향을 받기 때문에 순수 함수가 아니다.

 

 

🙋‍♀️ 어떤 게 순수 함수일까?

 

A.

let c = 12;
function sum(a, b){
	return a + b + c
}

외부 변수 c가 바뀌면 결괏값도 바뀌므로 순수 함수가 아니다.

 

 

B.

const obj = {value: 12};
function sum(obj, num){
	return {value: obj.value + num};
}

sum의 전달 인자가 변수와 같은 이름이라 헷갈릴 수 있지만 둘은 같지 않다. sum은 따로 obj라는 전달 인자를 받는다. 따라서 외부의 영향을 받지 않으므로 순수 함수이다.

 

 

 

📌 Eftect Hook

useEftect(함수[, 배열])

: 컴포넌트 내에서 Side Eftect를 수행할 수 있게 하는 Hook API

 

 

언제 실행되나요?

: 두 번째 인자 사용하지 않을 시, 렌더링 때마다 실행됨

 

 

➰ 렌더링 실행

• 컴포넌트 처음 생성될 때
• 컴포넌트의 state가 변경될 때
• 컴포넌트에 새로운 props가 전달될 때

 

◽ useEftect 두번째 인자로 실행 조절하기

• 인자로 아무것도 넣지 않음 : 렌더링이 실행될 때마다 첫 번째 인자 함수가 실행됨
• [] : 처음 컴포넌트가 생성될 때 한번 실행됨
• 종속성 배열 : 이 배열 내의 값이 변경될 때마다 실행됨

 

Hook을 쓸 때 주의할 점

• 최상위에서만 Hook호출
• react 함수에서만 Hook 호출