함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 한다.
// side effect 예제
let foo = 'hello'; // 전역변수 -- 함수 외부
function bar() {
foo = 'world'; // 함수 내의 어떤 구현
}
bar(); // bar는 Side Effect를 발생!
순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다. 또한 순수 함수는, 입력으로 전달된 값을 수정하지 않는다. 순수 함수에는 네트워크 요청과 같은 Side Effect가 없다. 순수 함수의 특징 중 하나는, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 반환됨을 보장한다. 그래서 예측 가능한 함수이기도 하다.
function upper(str) {
return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable)
}
upper('hello') // 'HELLO' -- str = 'hello'
React의 함수 컴포넌트는, props가 입력으로, JSX Element가 출력으로 나간다. 그 어떤 Side Effect도 없으며, 순수 함수로 작동한다.
function SingleTweet({ writer, body, createdAt }) {
return <div>
<div>{writer}</div>
<div>{createdAt}</div>
<div>{body}</div>
</div>
}
하지만 보통 React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다. 이는 React의 입장에서는 전부 Side Effect 이다. React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.
이 규칙을 주의해서 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있습니다.
useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Effect Hook 이다
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => { // 버튼을 클릭할 때 마다 useEffect를 통해 title을 변경하게 된다.
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
위 예제를 보면 화면에 button이 있고, 클릭하게되면 할 때 마다 useEffect를 통해서 title이 변하게 된다.
useEffect의 첫번째 인자는 함수이다. 해당 함수 내에서 side effect를 실행하면 된다. 이 함수는 다음과 같은 조건에서 실행된다.
이렇게 매 번 새롭게 컴포넌트가 렌더링될 때 Effect Hook이 실행된다.
잘 보고갑니다.. 갑자기 남은 엽떡 다시 먹고싶다....