리액트 함수형 컴포넌트 정리

리액트 함수형 컴포넌트

함수형 컴포넌트 예시

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

const 컴포넌트명 = ({ props명1, props함수명1 }) => {
    const [ state명1, setState명1 ] = useState(초기값);
    const [ state명2, setState명2 ] = useState(초기값);
    
    // Hook 작성 위치

    return (
        // 렌더링 시 화면에 그려줄 JSX 리턴
    );
};

export default 컴포넌트명;

함수형 컴포넌트에서는 클래스 컴포넌트 생명주기 함수와 같은 기능을 useEffect 함수 등 Hook으로 구현할 수 있습니다.

리액트 함수형 컴포넌트 Hook 종류는 아래와 같습니다.

컴포넌트 첫 렌더링 후 실행되는 Hook

useEffect(() => {
    // 첫 렌더링 완료 시 처리
}, []);

클래스 컴포넌트의 componentDidMount 함수 역할과 같습니다.

컴포넌트 렌더링, 리렌더링 후 실행되는 Hook

useEffect(() => {
    // 렌더링 완료 시 처리
});

클래스 컴포넌트의 componentDidMount, componentDidUpdate 함수 역할과 같습니다.

값이 변경될 때 실행되는 Hook

const 컴포넌트명 = ({ props명1 }) => {
    const [ state명, setState명 ] = useState(초기값);
    
    useEffect(() => {
        // 받은 변수의 값이 변경된 후 렌더링 완료 시 처리
    }, [state명, props명1]);
};

컴포넌트 제거 전 실행되는 Hook

useEffect(() => {
    return () => {
        // 마운트 해제되어 화면에서 Dom이 제거되기 전 처리
    }
}, []);

값이 변경되어도 리렌더링 안하는 변수 저장 Hook

import { useRef } from 'react';

function 컴포넌트명() {
    const ref명 = useRef(초기값);
    ref명.current = 변경값;
    
    return (
        // 렌더링 시 화면에 그려줄 JSX 리턴
    )
}

export default 컴포넌트명;