[ React 숙련 ] React Hooks, 의존성 배열(dependency array), clean up

 

 

React Hooks

리액트에서 제공하는 기능.

import 해야 사용 가능하다.

 

 

React Hooks - useState

 

useState

useState는 가장 기본적인 hook.

함수 컴포넌트 내에서 가변적인 상태를 가지게 해 줌.

 

기본적인 형태

import { useState } from 'react';
const [state, setState] = useState(초기값);

 

함수형 업데이트

setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣을 수 있다.

그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성할 수 있다.

// 기존에 우리가 사용하던 방식

setState(number + 1);

// 함수형 업데이트 형태

setState(() => {});

// 함수형으로 현재값 변경 : 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것.
setState((현재값) => return 현재값 + 1 );

// 위아래 코드 같음
setNumber((현재값) => {
  return 현재값 + 1;
});

 

 

정리

• useState의 업데이트 방식은 2가지 방식이 있으며, 각각 다르게 동작한다.
• useState로 원시데이터가 아닌 데이터를 변경할 때는 불변성을 유지해야 한다.

 

 

 

React Hooks - useEffect

 

 

useEffect

리액트 컴포넌트가 랜더링 될 때마다 특정한 작업을 수행해야 할 때 설정하는 Hook.

 - 컴포넌트가 화면에 보였을 때

 - 컴포넌트가 화면에서 사라졌을 때(return)

➔ 이때 무언가를 실행하고 싶다면, useEffect를 사용.

 

React에서 제공하는 훅(기능) 이므로, import 해서 사용한다.

import React, { useEffect } from "react";

 

코드 예제로 알아보는 useEffect 기초

useEffect의 핵심 : 컴포넌트가 렌더링 될 때 실행된다.

브라우저에서 우리가 App 컴포넌트를 눈으로 보는 순간, 즉 App 컴포넌트가 화면에 렌더링 될 때 useEffect 안에 있는 console.log가 실행된다. 

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
    // 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

 

 

useEffect와 리렌더링(re-rendering)

useEffect는 useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행됨.

이로 인해 의도치 않은 동작을 경험할 수도 있음.

import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log("hello useEffect");
  });

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

➔ input이 있고 value라는 state를 생성하여 input과 연결시킴. 이렇게 구현하고 브라우저에 input에 어떤 값을 입력하면 useEffect가 계속 실행됨.

 

➔ 전체 흐름

1. input에 값을 입력한다.
2. value, 즉 state가 변경된다.
3. state가 변경되었기 때문에, App 컴포넌트가 리렌더링 된다.
4. 리렌더링이 되었기 때문에 useEffect()가 다시 실행된다.
5. 1번 → 4번 과정이 계속 순환한다.

➔ 이를 해결하기 위해 필요한 것이 의존성 배열!

 

 

 

의존성 배열(dependency array)

이 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행한다.

사용 : useEffect 함수가 끝나는 부분 뒤에 두 번째 인자로 대괄호[] 안에 넣어줌.

[배열] 안에 어떤 값이 바뀌면 useEffect를 실행할지 정함.

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
  // 실행하고 싶은 함수
}, [의존성배열])

 

 

 

 1. 의존성 배열이 빈 배열인 경우

  useEffect(function () {

    console.log("hi");

  }, []);

➔ 의존성 배열이 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게”라는 의미를 가진다고 했고 우리가 아무것도 넣지 않았으니 useEffect는 처음에 딱 한 번만 실행되고 그 이후로는 어떤일이 일어나도 실행이 되서는 안됩니다.

// src/App.js

import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, []); // 비어있는 의존성 배열

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

이렇게 useEffect를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을  [ ]  빈 상태로 넣으면 됩니다.

 

 

 2. 의존성 배열에 값이 있는 경우

  useEffect(

    function () {

      console.log(`hi : ${value}`);

    },

    [value]

  );

// src/App.js

import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, [value]); // value를 넣음

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

value는 state이고 우리가 input을 입력할 때마다 그 값이 변하게 되니 useEffect도 계속 실행됨.

 

 

 

clean up

 

컴포넌트가 사라졌을 때 무언가를 어떻게 실행하는지?

➔ 클린 업 (clean up)

 

 

 

클린 업 하는 방법

useEffect 안에서 return을 해주고 이 부분에 실행되길 원하는 함수를 넣는다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(()=>{
    // 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.

    return ()=>{
      // 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
    }
  }, [])

  return <div>hello react!</div>
};

export default App;

 

  // clean up

  useEffect(

    function () {

      console.log(`hi : ${value}`); // 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수

      return () => {

        // 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수

        console.log("사라짐");

      };

    },

    [value]

  );

 

 

 

정리

 - useEffect는 화면에 컴포넌트가 mount 또는 unmount 됐을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다.

 - 의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다.

 - useEffect에서 함수를 1번만 실행시키고자 할 때는 의존성 배열을 빈 배열로 둔다.

 

 

 

---

 

 

React Hooks - useRef

 

DOM 요소에 접근할 수 있도록 하는 React Hook
이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지한다.

이러한 특징 때문에 useRef는 다음 2가지 용도로 사용됩니다.
 1. 저장공간
    1. state와 비슷한 역할을 해요. 다만 state는 변화가 일어나면 다시 렌더링이 일어나요. 내부 변수들은 초기화가 되죠.
    2. ref에 저장한 값은 렌더링을 일으키지 않아요. 즉, ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화되는 것을 막을 수 있죠.
    3. 컴포넌트가 100번 렌더링 → ref에 저장한 값은 유지돼요.

    4. 정리하면
        1. state는 리렌더링(컴포넌트의 변경)이 꼭 필요한 값을 다룰 때 쓰면 된다.
        2. ref는 리렌더링을 발생시키지 않는 값(안 봐도 되는 값)을 저장할 때 사용한다.

 2. DOM
    1. 렌더링 되자마자 특정 input이 focusing 돼야 한다면 useRef를 사용하면 됩니다.

 

 

예제 

import "./App.css";
import React, { useRef, useState } from "react";

const style = {
  border: "1px solid blue",
  margin: "10px",
  padding: "10px",
};

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  // useState로 선언한 변수 : 랜더링이 계속 이루어져 숫자가 바로 바뀜.
  const plusStateCountButtonHandler = () => {
    setCount(count + 1);
  };

  // useref로 선언한 변수 : 랜더링이 이루어지지 않아 숫자에 변동 없음(콘솔 찍으면 숫자 올라가는게 보임)
  const plusRefCountButtonHandler = () => {
    countRef.current++;
  };

  return (
    <>
      <div style={style}>
        state 영역입니다. {count} <br />
        <button onClick={plusStateCountButtonHandler}>state 증가</button>
      </div>
      <div style={style}>
        ref 영역입니다. {countRef.current} <br />
        <button onClick={plusRefCountButtonHandler}>ref 증가</button>
      </div>
    </>
  );
}

export default App;