Effect Hook

📂 Side Effect

---

📎 순수함수란?

• 순수 함수는 오직 함수의 입력(매개변수)만이 함수의 결과에 영향을 주는 함수입니다. 이에 따라 순수 함수는 항상 예측 가능한 동일한 리턴값을 출력합니다. Math.random() 같은 메서드는 동일한 입력에도 다른 출력이 나올 수 있으므로 순수 함수가 아닙니다.
• 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값을 생성해 반환하는 함수
• 인수를 변경하지 않는다.
• 외부값을 매개변수로 전달 받을 수 있지만 변수나 객체 자체를 재할당 하거나 변경시키는 경우는 비순수 함수이다.
• 어떤 외부 상태에도 의존하지 않으며 외부 상태를 변경하지도 않는다.
• 함수 내부에서 외부 상태를 직접 참조하면 외부 상태에 의존하게 되어 값이 변할 수 있다.
• 어떤 함수가 서버에 네트워크 요청을 보낸다면 이로 인해 서버의 데이터에 Side Effect를 일으킬 수 있고, 이에 따라 해당 함수는 순수 함수가 아니다.

📎 side effect란?

• 함수 내부에서 외부의 값에 관여하는 경우 Side 다Effect가 있다고 합니다. 순수 함수의 출력값에 영향을 미치는 작업들이 바로 Side Effect라고 할 수 있겠습니다. 앞으로 여러분의 코딩에 있어서 Side Effect를 최소화하거나 따로 분리하여 함수로 묶어주는 작업은 해당 프로젝트나 소프트웨어의 유지보수를 좀 더 수월하게 해줍니다.

"어떤 액션이 다른 액션을 유발하면 side effect"

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects.

리액트 컴포넌트에서의 side effect는 타이머를 사용할 때(setTimeout), 데이터 가져올 때(fetch API, AJAX 요청, localStorage), HTTP Request 등에서 일어난다. side Effect가 일어나는 경우는 useEffect로 넣어줘야한다.

 

 

 

📃  예제

다음 보기의 sum 함수 중 순수 함수인 것을 고르세요.

//1
let c = 12;
function sum(a, b){
	c = a * b;
	return a + b;
}
//외부의 변수인 c를 사용

리액트 컴포넌트에서의 side effect는 타이머를 사용할 때(setTimeout), 데이터 가져올 때(fetch API, AJAX 요청, localStorage) 일어난다. side Effect가 일어나는 경우는 useEffect로 넣어줘야한다.

//2
const obj = {value: 12};
function sum(obj, num){
	return {value: obj.value + num};
}
// 객체 obj를 인자로 받아서 사용한다. 객체 키값을 바꾸지 않고, 인자로 받아왔으니 순수함수

//3
const obj = {value: 12};
function sum(obj, num){
	obj.value += num;
}
//obj를 인자로 받았지만 obj.value 값을 재할당하고 있다. 외부의 객체 값을 바꾸고 있으니 비순수 함수이다.

//4
Math.sqrt(x)
//x의 제곱근 값은 항상 같다. 순수함수이다.

//5
Math.random()
// 0이상 1미만의 난수를 만드는 함수이다. 그 결과가 무엇이 될지 예측 불가하기 때문에 비순수 함수이다.

 

 

 

 

 

 

📂 Effect Hook

---

Effect Hook을 사용하면 함수 컴포넌트에서 side Effect를 수행할 수 있다.

 

📎 Effect Hook - useEffect의 실행 조건

useEffect는 컴포넌트가 새로 렌더링 될 때 실행된다.

컴포넌트가 새로 렌더링되는 세 가지 경우

• 컴포넌트 생성 후 처음 화면에 렌더링
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링

 

 

📎 hook을 쓸 때 주의 사항

• 최상위에서만 Hook을 호출한다props가 전달
• React 함수 내에서 Hook을 호출한다

 

컴포넌트가 새로 렌더링되는 세 가지 경우

 

 

 

 

 

 

 

📂 useEffect의 형태

---

useEffect의 두가지 형태 (별코딩, https://www.youtube.com/watch?v=kyodvzc5GHU)

📎 1. 인자로 콜백함수를 받음

컴포넌트가 렌더링 될 때마다 콜백이 실행된다.

(처음 마운트, 다시 랜더링 될 때마다 매번 콜백 호출)

콜백함수는 모든 컴포넌트평가 후, 실행된다(의존성이 바뀐 경우)-> 이게 뭔 말이지? 

 

📎 2. 콜백함수와 배열(defendency array)을 받음

처음 마운트, 배열(값의 목록) 안 요소의 값이 바뀔 때 실행 된다.

배열 안의 값이 state로 업데이트 되는 경우를 생각하면 된다.

 

📎 2-1. 빈 배열인 경우,  처음 마운트 때만 콜백 호출

처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때에 사용할 수 있다.

 

 

📃  예제 useEffect의 세 가지 형태

function App() {
	const [keyword, setKeyword] = userState("");
	const onChange = (event) => seyKeyword(event.target.value);

	useEffect(() => {
		console.log("나는 업데이트가 될 때마다 작동해") // 1
	})

	useEffect(() => {
		console.log("나는 keyword가 바뀔 때마다 작동해") // 2
	},[keyword])
    
	useEffect(() => {
		console.log("나는 처음만 작동해") // 2-1
	},[])
    

	return (
		<div>
			<input
				value={keyword}
				onChange={onChange}
				type="text"
				placeholder="검색창..."
			/>
		</div>
	)
}

 

 

 

 

📂 Dependency Array

---

종속성 배열이란, useEffect의 두번째 인자로 들어가는 배열을 말한다.

Dependency Array(종속성 배열)은 effect hook의 첫 번째 인자인 함수가 실행되는 조건을 담고 있는 두 번째 인자입니다. useEffect(함수, [종속성1, 종속성2, ...]) 형태로 나타내어지며 각 종속성은 표현식이 아닌 어떤 값으로 할당합니다.
종속성 배열은 반드시 존재하지는 않아도 됩니다. 두 번째 인자를 비우고 useEffect(함수)의 기본 형태로만 작성하면, 해당 effect hook의 함수는 다음 세 가지 조건에 따라 실행됩니다.

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링

종속성 배열에 넣어줘야 하는 경우 / 아닌 경우가 헷갈리면 아래 링크 참고

https://www.udemy.com/course/best-react/learn/lecture/28520645#questions

effect 함수에서 사용하는 모든 "것들"을 추가해야 합니다. 구성 요소(또는 일부 상위 구성 요소)가 다시 렌더링 되어 이러한 "것들"이 변경될 수 있는 경우.그렇기 때문에 컴포넌트 함수에 정의된 변수나 상태, 컴포넌트 함수에 정의된 props 또는 함수는 종속성으로 추가되어야 합니다!

쉽게 말해, sideEffect의 콜백함수의 결과에 영향을 미치는 것들을 넣으면 된다.

 

 

 

📂 클린업

---

타이머, 이벤트 리스너 등 함수 마치고 종료시켜줌

useEffect 안에서 리턴 값으로 (정리하는)함수를 넣어준다.

 

const Timer = (props) => {
 useEffect(() => {        // 콜백함수와 배열을 받는 useEffect 
 const timer = setInterval() => {
   console.log('타이머 돌아가는 중')
   }, 1000);
   
   return () => { 
   clearInterval(timer); //클린업
   console.log('타이머 클리어')
   };
 }, []); // 빈배열
 
 return (
 <div>
   <span>타이머를 시작합니다></span>
 </div>
 );
 };

 

사이드이펙트 함수가 실행되기 전에 실행됨.

 

 

 

 

 

📂 리액트에서 데이터를 필터하는 두 가지 방법

---

📎 컴포넌트 내에서 필터링

처음 단 한 번, 외부 API로부터 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법

 

📎 컴포넌트 외부에서 필터링

컴포넌트 외부로 API 요청을 할 때, 필터링 한 결과를 받아오는 방법 (보통, 서버에 매번 검색어와 함께 요청하는 경우가 이에 해당)

 

📎 두방식의 차이점

	장점	단점
컴포넌트 내	HTTP 요청의 빈도를 줄일 수 있다	브라우저(클라이언트)의 메모리 상에 많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난다
컴포넌트 외	클라이언트가 필터링 구현을 생각하지 않아도 된다	빈번한 HTTP 요청이 일어나게 되며, 서버가 필터링을 처리하므로 서버가 부담을 가져간다

 

 

 

 

📃 예제 1. 컴포넌트 내에서 필터링

import { useEffect, useState } from "react";
import "./styles.css";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까요?");
    const result = getProverbs();
    setProverbs(result);
  }, []);////////////////////////////////////////////// 처음 렌더링할 때만 effect 함수가 호출됨

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs
          .filter((prvb) => {
            return prvb.toLowerCase().includes(filter.toLowerCase()); //////////////직접 필터해서 넣어주고 있다
          })
          .map((prvb, i) => (
            <Proverb saying={prvb} key={i} />
          ))}
      </ul>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

 

📃 예제 2. 컴포넌트 외부에서 필터링 

import { useEffect, useState } from "react";
import "./styles.css";
import { getProverbs } from "./storageUtil";

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]); // 3. 종속성 배열에 filter를 넣었다. filter가 갱신될 때 마다 useeffect 안의 함수가 실행된다

  const handleChange = (e) => { // 2. 인풋에서 읽어온 이벤트 value를 setFilter에 넣어 filter 갱신
    setFilter(e.target.value);
  };

  const handleCounterClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} /> // 1.인풋에서 이벤트를 읽고 있다
      <ul>
        {proverbs.map((prvb, i) => (
          <Proverb saying={prvb} key={i} />
        ))}
      </ul>
      <button onClick={handleCounterClick}>카운터 값: {count}</button>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

 

 

 

 

 

📂 컴포넌트 내에서의 AJAX 요청 

---

fetch를 사용한다. 물론 side effect를 일으키는 코드이니 useEffect에 넣어준다.

데이터를 얻어오는 엔드포인트를 사용한다.

useEffect(() => {
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
    });
}, [filter]);

 

 

 

 

📂 loading indicator

---

모든 네트워크 요청이 항상 즉각적인 응답을 가져다주는 것은 아니다.

외부 API 접속이 느릴 경우를 고려하여, 로딩 화면(loading indicator)의 구현은 필수적.

 

Loading indicator의 구현 역시 state이고, side effect이다.

const [isLoading, setIsLoading] = useState(true);

// 생략, LoadingIndicator 컴포넌트는 별도로 구현했음을 가정합니다
return {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

컴포넌트가 구현되는 리턴문 안에서, Loading indicator가 로딩 완료 화면을 대체한다고 보면 된다.

isLoading이 true이면 Loading indicator가 출력되고, 렌더링이 끝나고 isLoading이 false이면 로딩완료 화면이 출력된다.

 

 

useEffect(() => {
  setIsLoading(true);
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);
    });
}, [filter]);

위의 예시처럼 네트워크 통신을 통해 서버로부터 데이터를 받는 경우 fetch 요청의 전후로 setIsLoading을 설정해 주어 보다 나은 UX를 구현할 수 있다.

 

 

 

 

 

 

 

📂 Reference

---

https://www.youtube.com/watch?v=kyodvzc5GHU

코드스테이츠

 

 

참고