Achievement Goals
Effect Hook
💎 Side effect가 어떤 의미인지 알 수 있다.
React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다.
Side effect의 예를 들 수 있다.
💎 Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
컴포넌트 내에서 네트워크 요청시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.
1. Before learning Effect Hook
Side Effect(부수 효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 side effect 가 있다고 한다.
let foo = 'hi';
function bar(){
foo = 'world'
}
bar(); pure function(순수 함수)
오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미.
어떠한 전달인자가 주어진 경우, 그 인자는 항상 똑같은 값을 리턴한다.
그러기 때문에 항상 예측이 가능한 함수이기도 하다.
function upper(str){
return str.toUpperCase();
}
upper('hello') //HELLO리액트 함수 컴포넌트는 {props} 가 입력으로, <JSX 엘리먼트>가 출력으로 나갔다. 이 형태는 오로지 순수함수로 작동한다.
하지만 보통 리액트 어플리케이션을 작성할 때 AJAX 요청을 필요로하는 데이터가져오기 , 타이머 등 리액트와 상관없는 API 를 사용하는 경우가 많다.
=> 리액트입장에서 모두 side effect 가 됨.
=> 이 side effect 를 다루기 위한 HOOK 인, Effect Hook 을 제공.
2. useEffect
useEffect란?
useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다.
useEffect()의 첫번째로 올 수 있는 인자는 함수형태이며, 이 함수 내에서 side effect를 실행하면 된다.
어떤 조건에서 실행될까?
🤓 컴포넌트 생성 후 첫 화면에 표시(렌더링)
🤓 컴포넌트에 새로운 props가 전달되며 렌더링.
🤓 컴포넌트에 state(상태) 가 바뀌며 렌더링.
공통점을 찾아보면, 매번 새롭게 컴포넌트가 렌더링 될 때 effect Hook이 실행되는것을 알 수 있다.
주의할 점
😮 최상위에서만 Hook 을 호출할 수 있다.
😮 React 함수 내에서만 Hook을 호출할 수 있다.
조건부 effect 발생
useEffect()의 두번째 인자로 올 수 있는것은 배열형태 이다.
이 배열은 어떤값의 변경이 일어날 때, 즉 어떤 값의 목록이 들어간다.
이 배열을 종속성 배열이라고도 한다.
export default function App() {
const [proverbs, setProverbs] = useState([]);
const [filter, setFilter] = useState("");
const [count, setCount] = useState(0);
useEffect(() => {
console.log("언제 effect 함수가 불릴까요?");
const result = getProverbs(filter);
setProverbs(result);
}, [filter]);
const handleChange = (e) => {
setFilter(e.target.value);
};
const handleCounterClick = () => {
setCount(count + 1);
};이 예제를 보면 useEffect(()=>{},[])는
각각의 첫번째인자(함수형태), 두번째인자(배열형태) 를 다 가지고 있다.
종속성배열에 포함되는 filter의 값이 변경이 될때 처음인자 함수인 setProverbs 가 반영되어 변경된다.
하지만 count 는 종속성배열에 포함되지 않았음으로 filter 값이 변경되도 count 는 아무런 변화가 없다.
🧐 만약 종속성 배열목록에 아무것도 없다면?
즉, 두번째 배열을 빈배열로 둔다면?
useEffect(()=>{},[])컴포넌트가 처음 생성될때만 effect 함수가 실행된다.
예를들어 맨 처음 외부 API를 통해 리소스를 받아오고, 더이상 API 호출이 필요없을 때 이와같은 형태로 사용된다.
기본형태인 두번째 인자를 아예 안넘기는것과 다른 결과를 나타낸다.
useEffect(()=>{})*기본형태 잊지말기
- useEffect 컴포넌트 처음생성시 사용.
- props 가 업데이트 될때 실행.
- state 가 업데이트 될때 실행.
3. 컴포넌트 내 AJAX 요청
목록 내부에서 필터링을 구현하는 방법은 크게 두가지로 접근할 수 있다.
1. 컴포넌트 내에서 필터링
=> 전체 목록 데이터를 불러오고, 목록을 검색어로 필터링 하는 방법
장점 : HTTP 요청의 빈도수가 줄어든다.
단점 : 브라우저(클라이언트)의 메모리상에 데이터가 많아지므로 클라이언트의 부담이 늘어난다.
2. 컴포넌트 외부에서 필터링
=> 컴포넌트 외부로부터 API 요청을 할 떄, 필터링한 결과를 받아오는 방법.
장점 : 클라이언트는 필터링구현을 생각하지 않아도 된다.
단점 : HTTP 요청이 많아짐에 따라 서버가 필터링을 처리하므로 서버의 부담이 커진다.
