자바 스프링/react & springboot

#4 React useEffect, useMemo, useRef

2023. 2. 12. 21:10
목차
  1. import에 대해
  2. useEffect
  3. useEffect의 사용 예시
  4. useMemo

강의 링크 :

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 함수가 다시 실행되지 않는다.

 

 

 

 

 

 

 

'자바 스프링 > react & springboot' 카테고리의 다른 글

#3 React useState  (0) 2023.02.11
#2 React 배열, 배열 수정  (0) 2023.01.31
#1 React 실행흐름, 기본문법  (0) 2023.01.19
#0 React 설치 및 세팅  (0) 2023.01.18
  1. import에 대해
  2. useEffect
  3. useEffect의 사용 예시
  4. useMemo
'자바 스프링/react & springboot' 카테고리의 다른 글
  • #3 React useState
  • #2 React 배열, 배열 수정
  • #1 React 실행흐름, 기본문법
  • #0 React 설치 및 세팅
daramG
daramG
dotori Java
daramG
다람쥐의 개발 블로그
daramG
전체
오늘
어제
  • 분류 전체보기 (193)
    • Java 코딩테스트 공부 (67)
      • Java 알고리즘 공부 (37)
      • Java 백준 문제풀이 (27)
      • Java 코테 나만의 팁 (3)
    • SQL Study (0)
      • Programmers SQL 문제풀이 (0)
      • SQLP 준비 (0)
    • 웹 개발 지식 정리 (0)
      • Servlet (0)
      • Java 정리 (0)
    • 자바 스프링 (45)
      • 스프링 공부 (4)
      • 스프링 게시판 프로젝트 (6)
      • 부트 블로그 JPA 프로젝트 (30)
      • react & springboot (5)
      • 스프링 오류창고 (0)
      • 리액트 + 스프링 프로젝트 (0)
      • pf (0)
      • pfError (0)
    • React (6)
      • React 정리 (3)
      • React 오류 창고 (3)
    • C++ 코딩테스트 공부 (중단) (20)
      • c++ 백준 문제풀이 (15)
      • c++ 알고리즘 공부 (5)
    • Unity (3)
      • Unity 공부 (3)
    • WebRTC (2)
      • WebRTC 강의학습 정리 (0)
      • WebRTC 프로젝트 (1)
    • 김영한님의 스프링 강의 학습 (10)
      • 스프링 강의 목차 (1)
      • 인텔리제이 & 스프링 기초 (1)
      • 스프링 핵심 원리 (8)
    • 전공 지식 정리 (40)
      • interview (0)
      • Java (0)
      • 운영체제 (4)
      • 데이터베이스 설계 (10)
      • 소프트웨어 공학 (3)
      • 유닉스 (14)
      • 디지털 논리회로 (0)
      • 인공지능 (7)
      • js (0)
      • etc (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • React&Spring 강의수강
  • Java 코테 나만의 팁
  • 코테 알고리즘
  • 스프링부트 프로젝트
  • 김영한 스프링 입문
  • 데이터베이스 설계
  • 스프링 공부
  • Java 백준 문제풀이
  • Unity 공부
  • 유닉스
  • 무서운 이야기
  • 김영한의 스프링 핵심 원리
  • 노마드코더의 zoom클론코딩
  • java
  • 부트 jpa 게시판 프로젝트
  • 운영체제
  • 디지털 논리회로
  • 김영한 스프링 강의
  • 스프링 프로젝트
  • 인공지능
  • 스프링부트 블로그 프로젝트
  • java 알고리즘
  • 백준 c++
  • C++ 알고리즘

최근 댓글

최근 글

hELLO · Designed By 정상우.
daramG
#4 React useEffect, useMemo, useRef
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.