[React] 함수형 컴포넌트에서 클래스형 컴포넌트 작업을 하기 위해.. 필요한 건, React Hook!

혅·2024년 3월 2일

React

Study Note ✍🏻

목록 보기

34/60

함수형 컴포넌트랑 클래스형 컴포넌트

React의 Component 선언 방식은 함수형 Component랑 클래스형 Component로 나뉜다. 현재는 대부분 함수형 Component로 개발을 한다.

함수형 Component

state, life cycle 관련 기능을 사용할 수 없음. (현재 Hook을 통해 해결 됨)
클래스형 Component보다 선언하기 편함.
메모리 자원을 클래스형 Component보다 덜 사용.

클래스형 Component

state, life cycle 관련 기능 사용 가능.
임의 메소드를 정의 가능.
constructor, this, binding과 같은 여러 규칙을 따라하기 때문에 코드가 복잡하고 길어짐.
특정 DOM 처리나 API 호출, 상태 관리 같은 로직의 재사용이 제한적

Hook

클래스형 Component에서 이용하던 코드를 작성할 필요없이 함수형 Component에서 다양한 기능을 사용할 수 있게 만든 라이브러리.

Hook의 규칙

최상위에서 Hook을 호출해야 함.
- 반복문, 조건문 또는 중첩된 함수 내에서 호출할 수 없다.
- 호출되는 순서에 의존하기 때문에 순서가 꼬여 버그가 발생할 수 있음.
- Hook이 여러번 호출되는 경우에도 Hook의 상태를 올바르게 유지할 수 있음.
React 함수 내에서만 Hook을 호출해야 함.

useState

State

에러가 있는가?
모달 창을 열고 있는가?
버튼을 클릭했는가?
텍스트 박스에 무언가를 입력했는가?

위와 같은 상태는 모두 State로 관리한다. 이벤트가 실행되는 경우 등에 업데이트 처리를 수행함으로써 동적 애플리케이션을 구현한다.

useState

import { useState } from "react";

위와 같이 import 하여 사용할 수 있다.

const [num, setNum] = useState();

useState 함수 반환값은 배열 형태로 첫 번째에 State 변수, 두 번째에 State를 업데이트하기 위한 함수가 있다.
위 코드에서는 num이 상태 변수가 되고, setNum 함수를 이용해 상태를 업데이트한다. ()안에 값을 지정하여 초깃값을 설정해줄 수도 있다.

import { useState } from "react";

function Example() {
	const [num, setNum] = useState(0);
    
    const handleNum = () => {
    	setNum(num+1);
    }
    
    return(
    	<button onClick={handleNum}>1 증가</button>
    );
}

다음 예시 코드에서는 버튼을 클릭해줄 경우, +1을 증가해주고 있다.

State는 숫자 외에도 문자열, 논릿값, 배열, 객체 등 무엇이든 관리할 수 있다.

useEffect

재렌더링

변경을 감지하고 컴포넌트를 다시 처리.

useEffect

import { useEffect } from "react";

위와 같이 import하여 사용할 수 있다.

useEffect(실행함수, [의존성 배열]);

컴포넌트 마운트 시와 의존성 배열에 지정한 값이 변했을 때에만 처리를 실행하도록 한다.

useEffect(() => {
	console.log("값 변함");
}, [num]);

위 코드는 num 값이 변할 때마다 console에 "값 변함"을 출력해준다.
의존성 배열은 없을 수도 있고, 빈 배열일 수도 있고, 하나의 배열, 두 개 이상의 배열이 들어갈 수 있다.

의존성 배열이 없을 때 : 렌더링 될 때마다 함수를 실행
의존성 배열이 빈배열일 때 : 첫 렌더링 시에만 함수를 실행
의존성 배열이 하나일 때 : 해당 값이 변할 때마다 함수를 실행
의존성 배열이 두 개 이상일 때 : 의존성 배열 중 하나 이상의 값이 변할 때마다 함수를 실행

useEffect(() => {
    console.log("값 변함");
    
    return () => {
      console.log("언마운트 됨");
    };
  }, [num]);

언마운트 시에 다음과 같이 cleanup 함수를 적용할 수 있다.

useRef

특정 DOM에 접근하여 DOM 조작을 가능하게 함.
Ref안에 있는 값을 아무리 변경해도 컴포넌트는 재랜더링 되지 않아, 불필요한 렌더링을 막을 수 있음.

State의 변화 -> 렌더링 -> 컴포넌트 내부 변수 초기화
Ref의 변화 -> 렌더링 되지 않음 -> 변수 값 유지
State의 변화 -> 렌더링 -> Ref 값 유지

import { useRef } from 'react';

위와 같이 import하여 사용할 수 있다.

const divRef = useRef(null);

const changeColor = () => {
	divRef.current.style.color = 'red';
};

const changeFontSize = () => {
	divRef.current.style.fontSize = '24px';
};

return (
	<>
    	<div ref={divRef}>Hello</div>
        <button onClick={changeColor}>Change Color</button>
        <button onClick={changeFontSize}>Change Font Size</button>
    </>
);

위 코드는 스타일 변경을 위해 useRef를 사용한 예제로, Change Color 버튼을 클릭하면 Hello가 빨간색으로 표시되고, Change Font Size 버튼을 클릭하면 글씨 크기가 24px로 커지게 된다.

  const count = useRef(0);
  const [name, setName] = useState("");

  const handleNameChange = (e) => {
    count.current++;
    setName(e.target.value);
  };

  return (
    <>
      <div>{count.current}</div>
      <input type="text" value={name} onChange={handleNameChange} />
    </>
  );