[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 22회차 미션

useEffect Hook

이 함수는 우리가 만든 react 컴포넌트가 처음 화면에 나타낼때나 사라질때 특정 작업을 할 수 있다. 추가적으로 컴포넌트에 어떤 props나 상태가 바뀌어서 업데이트 될 때, 업데이트 되기 전에도 어떤 작업을 할 수 있고, 리렌더링 될 때마다 작업을 등록할 수도 있다.

/* UserList.js */
import React,{ useEffect } from 'react';

function User({user, onRemove, onToggle}){
    const {username, email, id, active} = user;
    useEffect(() => {
        console.log('컴포넌트가 화면에 나타남');
    }, []);
    .
    .
    .

컴포넌트가 mount , unmount 된다는 표현은 컴포넌트가 나타나거나 삭제될때 나타낸다.
useEffect를 사용해서 첫번째 파라미터에 실행하고자하는 함수를 넣어준다.
그리고 두번째 파라미터에 비어있는 배열 []을 넣어준다. 이 배열을 deps라고 부르고 의존되는 값들을 배열안에 넣는것인데, 만약 이 값이 비어있다면 컴포넌트가 처음 마운트될 때 실행이된다.

여기까지 실행하고 웹브라우저의 개발자도구를 실행시켜서 info 부분을 살펴보면 '컴포넌트가 화면에 나타남'이 떠있다.

만약 여기서 계정을 추가해보면 다시 console.log부분이 실행된다.

이번에는 컴포넌트가 unmount 될 때 특정 작업을 하는 방법을 알아보자.
그럴 때는 함수에서 클린업 함수를 반환해주면되는데, 함수를 그냥 반환해주면 된다.

function User({user, onRemove, onToggle}){
    const {username, email, id, active} = user;
    useEffect(() => {
        console.log('컴포넌트가 화면에 나타남');
        return () =>{
            console.log('컴포넌트가 화면에서 사라짐');
        }
    }, []);

이제 삭제하는 작업시 컴포넌트가 화면에서 사라짐이 출력되게 된다.
컴포넌트가 mount 될때 주로 추가하게되는 작업들은

• props로 받은 값을 컴포넌트의 state로 설정하는것
• 외부 API 요청
• 라이브러리를 사용할 때
• setInterval, setTimeout 등

unmout 시

• clearInterval, clearTimeout
• 라이브러리 인스턴스 제거

등을 cleanup함수를 통해 처리해 줄 수 있다.

function User({user, onRemove, onToggle}){
    const {username, email, id, active} = user;
    useEffect(() => {
        console.log('user 값이 설정됨');
        console.log(user);
        return () =>{
            console.log('user 값이 바뀌기 전');
            console.log(user);
        }
    }, [user]);

deps 배열에 user라는 값이 있을땐 어떻게될까?

실행해보면 user값의 변화되는 상태가 나타나게된다.

만약에 useEffect에 등록한 함수에서 props로 받아온 값이나 useState로 관리하고 있는 값을 참조하고 있는경우에는 deps배열에 꼭 넣어줘야한다.

만약 deps 배열을 생략하게 되는경우에는 어떻게 작동하는지 알아보자.

    useEffect(() => {
        console.log(user);
    });

여기서 console.log(user); 만 넣어주면 컴포넌트가 리렌더링 되고나서 호출이되는데. 요소를 클릭했을때 뿐만아니라 모든 컴포넌트에서 console.log가 출력되게 된다.리액트 컴포넌트에서는 부모컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링된다. user컴포넌트의 부모 컴포넌트는 UserList 인데 UserList에서 user컴포넌트가 바뀌게되면 UserList가 리렌더링되고 User컴포넌트까지 리렌더링된다.

정리.
useEffect 파라미터의 첫번째파라미터에는 함수를 , 두번째파라미터에는 deps라는 배열을 등록한다.
그리고 return 으로 특정함수를 반환하게되면 cleanup함수여서 업데이트 바로 직전에 호출되게 된다. 만약 의존하고 있는 함수나 상태가 있다면 deps를 꼭 등록해줘야한다.

useMemo Hook

use이 Hook 함수는 주로 성능을 최적화해야하는 상황에 사용한다.

예를들어서 실행화면에 초록색으로 표시된 active 유저들의 수를 세주는 프로그램을 만든다고 가정해보자.
App.js 에서 countActiveUsers(users)라는 함수를 추가해준다.
return 에서 active true 상태인것만 filtering 해서 length를 가져오면 될 것이다.

/* App.js */
function countActiveUsers(users){
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}
.
.
.
const count = countActiveUsers(users);
  return (
    <>
    <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate}/>
    <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
    <div>활성 사용자 수 : {count}</div>
    </>
  )

그리고 count를 정의해서

로 감싸고 출력해준다.

여기서 사용자를 클릭하면 수를 다시 세서 출력하게되는데 클릭할 때는 당연히 리렌더링되어야 하지만 지금 같은 상황에서 사용자명 input란에 글자를 하나씩 입력해보면 활성사용자수를 세는 count도 계속해서 동작하게 된다.
불필요한 동작이 있다. 이때 사용하는것이 useMemo라는 Hook이다.
특정 값이 바뀌었을 때만 특정함수를 실행해서 연산을하고 원하는 값이 변하지 않았더라면 리렌더링 할 때 이전에 만들었던 값을 재사용할 수 있게 해준다.

/*App.js*/ 
import React,{ useRef, useState, useMemo } from 'react';
.
.
const count = useMemo(() => countActiveUsers(users),[users]);
.
.

useMemo를 불러와주고 기존에 정의했던 count를 useMemo로 감싸준다.
첫번째 파라미터는 함수가 두번째 파라미터에는 deps가 들어가게된다.

필요한 연산을 필요할 때만, 컴포넌트 성능을 최적화할 때 사용한다.

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스