react - Hooks(useState, useEffect, useContext)

마운트(생성)

✔️constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드

✔️getDerivedStateFromProps : props로 받아온 것을 state에 넣을 때 사용하는 메서드이며, 컴포넌트가 처음 렌더링 되기 전에 호출되며 리렌더링 되기 전에도 항상 실행된다.

✔️render : 컴포넌트를 렌더링 하는 메서드

✔️componentDidMount : 컴포넌트의 첫 렌더링을 마친 후 호출되는 메서드이며, 이 메서드가 호출되는 시점에선 이미 컴포넌트가 화면에 출력된 상태이다. 이 단계에선 axios, fetch 등을 사용해 해당 컴포넌트에서 필요하는 데이터를 요청하는 등의 작업을 진행한다.

업데이트(갱신) 

✔️getDerivedStateFromProps : 마운트 단계와 동일하며, 컴포넌트의 props나 state가 변경됐을 때도 호출되는 메서드

✔️shouldComponentUpdate : 컴포넌트의 리렌더링 여부를 결정하는 메서드로, React.memo와 역할이 비슷하다.

✔️render : 컴포넌트를 렌더링 하는 메서드

✔️getSnapshotBeforeUpdate : render에서 만들어진 결과가 브라우저에 실제 반영되기 직전에 호출되는 메서드. 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 메서드에서 받아와 사용을 할 수 있다. 하나의 예시로 페이지에 새로운 내용이 추가됐을 때 사용자의 스크롤 위치를 새로운 내용이 아닌 기존 위치로 유지하기 위해 사용할 수 있다. 참고로 함수형 컴포넌트 개발 시 훅을 사용하여 getSnapshotBeforeUpdate 메소드를 대체할 수 없다.  벨로퍼트님 블로그 참고

✔️componentDidUpdate : 리렌더링을 마친 후 브라우저에 모든 변화가 나타난 후 호출되는 메서드. 세 번째 파라미터로 ✔️getSnapshotBeforeUpdate에서 반환한 값을 불러올 수 있다.

 

언마운트(제거)

✔️componentWillUnmount : 컴포넌트가 브라우저에서 사라지기 직전에 호출되는 메서드. 주로 DOM에 직접 등록했던 이벤트를 제거하는 등의 작업을 한다.

 

기타

✔️componentDidCatch : 컴포넌트 렌더링 중 에러가 발생했을 경우 애플리케이션이 중단되지 않고 오류 화면을 보여주는 메서드.

 

✅useState

state -> 컴포넌트의 상태 

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

const heavyWork = () => {
  console.log("엄청 무거운 작업")
  return ["홍길동", "김민수"];
}

// App Component
function App() {
  const [names, setNames] = useState(() => {return heavyWork();});
  const [input, setInput] = useState("")

  const inputChange = (e) => {
    setInput(e.target.value)
  }

  const addName = () => {
      setNames((prevState)=>{
        return [...prevState, input]
      })
      setInput("")
  }

  return (
    <div>
      <input
        type="text"
        class="w-100px px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:border-indigo-500"
        value={input}
        onChange={inputChange}
      ></input>
      <button onClick={addName} class="w-100px px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:border-indigo-500">
        Upload
      </button>
      {names.map((name , idx) => {
        return <p key={idx}>{name}</p>;
      })}
    </div>
  );
};

export default App;

  const [names, setNames] = useState(   () => {return heavyWork();}    );

 

 

react는 값이 바뀔때마다 업데이트 되는 형식이다. 

 

useState(   heavyWork();    );

두방식의 차이는 이 방식은 값이 바뀔때마다 함수값이 계속 호출된다. 

 

useState(   () => {return heavyWork();}    );

하지만 위의 방식처럼 callback함수 형식으로 쓰면 한번만 값이 호출된다.  

 

✅useEffect

• 기본적으로 인자로 콜백함수를 받는다. 

※ 콜백함수란 다른 함수의 인자로 전달된 함수를 의미한다. 

• 컴포넌트가 실행될때마다 매번 렌더링이 실행된다. 

• 컴포넌트가 매번 실행되는 것이 아니라 배열안에 있는 값이 바뀔때만 렌더링된다. 
• 빈배열을 준다면 첫 화면을 렌더링할때만 실행된다. 

 

• 나중에 setInterval과 같은 함수를 unmount시키기 위해서는 

    useEffect(() => {
       const timer = setInterval(() => {
        console.log("타이머 돌아가는 중");
       }, 1000);

           return () => {
             clearInterval(timer);
             console.log("타이머가 종료되었습니다.");
           };
    }, [])

이런 형식의 종류 함수가 필요하다. 

 

 

※번외 : 프로젝트를 진행하던 중 다음과 같은 코드에서 의문이 생겼다. 

useEffect(() => {
  const handleUnload = () => {
    if (time > 0 && selectedSubjects.length > 0) {
      saveTimer(time, selectedSubjects);
    }
  };
  window.addEventListener('beforeunload', handleUnload);

  return () => {
    window.removeEventListener('beforeunload', handleUnload);
  };
}, [time, selectedSubjects]);

 

나는 브라우저가 꺼질 때 handleUnload함수를 실행시키고 싶은데 왜 의존성 배열에 time이랑 selectedSubjects를 넣은 코드를 gpt가 알려줬을까?? 

useEffect 내부의 handleUnload 함수는 브라우저가 닫히거나 새로고침될 때만 실행되며, time이나 selectedSubjects가 바뀔 때마다 실행되지는 않습니다.

 

다만, 의존성 배열에 time과 selectedSubjects가 포함된 이유는, 브라우저가 닫힐 때 이 값들의 최신 상태가 반영되도록 하기 위함입니다. 의존성 배열이 없거나 비워져 있으면, handleUnload는 최초에 렌더링된 시점의 값을 기억하게 됩니다.

 

따라서 time이나 selectedSubjects가 변경되더라도 handleUnload가 최신 값을 참조하지 못하고, 그 시점에 저장된 값으로 서버에 데이터를 전송할 수 있는 위험이 있습니다.

 

즉, 브라우저가 닫힐 때만 handleUnload가 실행되지만, 그 안에서 참조하는 time과 selectedSubjects는 최신 상태를 유지하려면 의존성 배열에 포함되어 있어야 합니다.

 

이 점이 의존성 배열이 중요한 이유이며, 의존성 배열은 이벤트 발생 자체를 컨트롤하는 게 아니라, 그 이벤트가 발생할 때 참조하는 값을 최신으로 유지하는 역할을 합니다.

1. "의존성 배열이 바뀔 때마다 useEffect 안의 함수가 실행된다."

• useEffect의 기본 동작 원리를 설명하는 방식. useEffect는 의존성 배열에 들어 있는 값이 변경될 때마다 내부의 함수를 다시 실행한다. 이 설명은 "언제 실행되느냐"에 중점을 둔 설명이다.

2. "이벤트가 발생할 때 참조하는 값을 최신으로 유지한다."

• 이 설명은 "왜 의존성 배열에 값을 넣느냐"에 대한 설명. 즉, 브라우저가 닫힐 때 실행되는 handleUnload 같은 이벤트가 발생할 때, 그 시점에서 time과 selectedSubjects의 최신 값을 참조할 수 있도록 보장하기 위해 의존성 배열에 넣는다는 것이다. 이 설명은 "의미"에 중점을 둔 설명이다. 

 

✅useContext

useContext는 react에서 제공하는 훅으로, 하위 컴포넌트에게 context를 제공하는 훅입니다.

“context”란 직역하면 환경이라는 의미이지만, 여기서는 리액트에서는 각 컴포넌트가 참조할 수 있는 데이터 모음이라고 생각하시면 될 것 같습니다.

아래의 코드는 프롭스를 하위 컴포넌트로 전달하는 예시입니다

 

전역적인 데이터를 전달하는데 편리하다. 

📢 useContext :  "내 데이터 필요한 사람~~~~~

• Context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다.
• Prop drilling을 피하기 위한 목적이라면 Component Composition(컴포넌트 합)을 먼저 고려해보자.