#4 React useEffect, useMemo, useRef

강의 링크 :

https://www.youtube.com/watch?v=8qIsZsjdvjo&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=7 

https://www.youtube.com/watch?v=lgMtc0SyW64&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=8 

https://www.youtube.com/watch?v=fZYIzTuAcNk&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=9 

해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다!

 

 

import에 대해

 

Sub.js

둘은 같음

export default Sub; 는

이 Sub 함수를 외부에 노출하겠다는 것이다.

그럼 이 외부에 노출된 함수를 어떻게 사용해야 할까?

 

./Sub 는 경로이다. ( ./는 현재 경로를 의미 즉 같은 폴더 안에 위치한다는 것)

만약 Sub.js가 같은 폴더가 아니라 daram 폴더 안에 존재한다면

import Sub from './daram/Sub' 라고 작성해주면 된다.

 

그럼 import 할 때 이런 중괄호{ } 는 대체 뭘까?

 

export default 는 하나밖에 못하고 num과 같이

추가적으로 export하고 싶을 경우 중괄호{}로 감싸 export 하는 것이다.

 

이 num을 App.js에서 받아서 화면에 그려보자

import './App.css';
import { num } from './Sub';

function App() {
  return <div>ㅇㅅㅇ{num}</div>;
}

export default App;

 

실행결과 )

ㅇㅅㅇ7

 

 

useEffect

 

useEffect의 함수 실행 시점은 App() 그림이 최초 그려질 때

useEffect()에 콜백 함수가 들어갈 수 있다.

import { useEffect } from 'react';
import './App.css';
import { num } from './Sub';

function App() {
  // 실행시점 : App() 함수가 최초 실행될 때 (마운트될 때)
  useEffect(() => {
    console.log('useEffect 실행됨');
  });

  return <div>ㅇㅅㅇ{num}</div>;
}

export default App;

App() 함수가 최초 실행될 때 콘솔에 찍히는 것을 확인할 수 있다.

 

useEffect의 함수 실행 시점은 상태 변수가 변경될 때

import { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [data, setData] = useState(0);
  // 실행시점 : App() 함수가 최초 실행될 때 (마운트될 때)
  useEffect(() => {
    console.log('useEffect 실행됨');
  });
  const add = () => {
    setData(data + 1);
  };

  return (
    <div>
      <h1>데이터 : {data}</h1>
      <button onClick={add}>더하기</button>
    </div>
  );
}

export default App;

 

실행결과 )

 

이렇게 상태 변수가 실행될 때 useEffect가 실행된다.

그럼 이 코드를 살펴보자

import { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [data, setData] = useState(0);
  // 실행시점 :
  // App() 함수가 최초 실행될 때 (마운트될 때)
  // 상태 변수가 변경될 때
  const download = () => {
    let downloadData = 7;
    setData(downloadData);
  };
  useEffect(() => {
    console.log('useEffect 실행됨');
    download();
  });
  const add = () => {
    setData(data + 1);
  };

  return (
    <div>
      <h1>데이터 : {data}</h1>
      <button onClick={add}>더하기</button>
    </div>
  );
}

export default App;

 

실행화면 )

코드를 이렇게 작성하면 data가 7이 되어있다.

App() 함수가 최초로 실행될 때 useEffect가 실행되어 download() 함수가 실행되어 data가 7이 되기 때문이다.

여기서 더하기 버튼을 누르면 8로 잠깐 변했다가 다시 7로 되어버린다.

상태 변수가 변경될 때 useEffect가 실행되어 download() 함수가 실행되어 data가 7이 되기 때문이다.

 

그럼 여기서 상태 변수 변경에 의존하지 않고 App() 함수가 최초로 실행될 때 에만 작동하도록 할 수 있을까?

이렇게 DependencyList를 비워주면 된다. 이러면 어디에도 의존하지 않는다는 것이다.

 

실행결과 )

그래서 이제는 데이터가 변경되어도 useEffect가 실행되지 않는다.

이렇게 다시 data 값에 의존시키면 data가 변경될 때 useEffect가 실행된다.

 

 

useEffect의 사용 예시

https://www.notion.so/f00574ccb0884320b3f5056c699e6832?pvs=2 

 

 

 

useMemo

 

useMemo는 컴포넌트의 성능을 최적화 할 수 있는 대표적인 React hooks 중 하나이다.

Memo는 Memoization을 뜻한다.

기존에 수행한 연산 결과값을 어딘가 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다.

다음 예시를 통해 살펴보자

 

App.js

import { useState } from 'react';
import './App.css';

// useMemo

function App() {
  const [list, setList] = useState([1, 2, 3, 4]);
  const [str, setStr] = useState('합계');

  const getAddResult = () => {
    let sum = 0;
    list.forEach((i) => (sum = sum + i));
    console.log('sum 함수가 실행됨 : ', sum);
    return sum;
  };

  return (
    <div>
      <button
        onClick={() => {
          setStr('다람쥐');
        }}
      >
        문자변경
      </button>

      <button
        onClick={() => {
          setList([...list, 7]);
        }}
      >
        리스트값 추가
      </button>
      <div>
        {list.map((i) => (
          <h1>{i}</h1>
        ))}
      </div>
      <div>
        {str} : {getAddResult()}
      </div>
    </div>
  );
}

export default App;

 

실행결과 )

 

 

문자변경 버튼을 누르면 sum 함수가 실행됨이 콘솔창에 또 찍히게 된다.

문자변경 버튼을 눌러도 해당 getAddResult 함수가 실행된다는 것이다.

 

왜 그럴까?

const [str, setStr] = useState('합계');

이 변수를 들고 있는 영역이 다시 리턴된다.

즉, 이 리턴 영역 자체가 다시 실행된다는 것이다.

 

문자변경 버튼을 눌렀을 때 이 sum 함수가 다시 실행되는 것을 어떻게 막을 수 있을까?

이럴 때 useMemo를 사용하면 된다.

 

 

getAddResult()를 기억하고, dependency에 [list]을 넣은 것이다. (리스트가 변경될 때 실행됨)

이제 문자변경 버튼을 눌러도 sum 함수가 다시 실행되지 않는다.