리액트(React) 함수형 컴포넌트 && hook(훅)

안녕하세요~ 이번에는 리액트 함수형 컴포넌트와 훅에 대해 알아보도록 하겠습니다.

📑목차
1. 함수형 컴포넌트
1-1. 함수형 컴포넌트의 등장 배경
1-2. 함수형 컴포넌트 문법
2. Hook(훅)
2-1. Hook(훅)이란?
2-2. Hook(훅)의 등장 배경
2-3. Hook(훅)의 종류

서론

먼저 함수형 컴포넌트를 배우기 전에 클래스형 컴포넌트 구조를 한번 보셨을까요? 클래스형 컴포넌트에는 생성자 함수를 호출하고, this 키워드를 사용하여 컴포넌트 구조를 구현했어야 했습니다. 클래스 문법에 대한 개념이 잡혀있지 않으면 개발자로선 구현하기가 어려웠죠, 그래서 이번에 알아볼 내용은 함수형 컴포넌트와 Hook에 대해 알아보도록 하겠습니다. 

본론

1. 함수형 컴포넌트 

 

1-1. 함수형 컴포넌트의 등장 배경

 

초기에는 함수형 컴포넌트가 제공이 되었지만 props를 받아서 화면만 그리는 단순한 컴포넌트에 한정되어 있었습니다. 생명주기나, 상태제어를 할 수 없었기 때문에 컴포넌트를 주로 클래스형 컴포넌트로 구현했어야 했습니다. 상태 관리, 라이프사이클 메서드를 사용할려면 반드시 클래스를 선언해야 하고, this 바인딩 처리도 필요했습니다. 클래스형 컴포넌트로 기능을 구현했을 때는 강력했지만, 코드가 길어지고, 복잡하여 코드의 가독성이 떨어지는 단점이 있었습니다. 이러한 문제를 해결하기 위해 함수형 컴포넌트에서도 상태관리, 라이프사이클 기능을 사용할 수 있도록 하는 2019년 Hook(훅)이 도입된 이후 부터 본격적으로 클래스형 컴포넌트를 대체할 수 있게 된 것입니다.

 

1-2. 함수형 컴포넌트 문법

import { useState, useEffect } from "react";
// useState 상태변수를 선언해서 사용할수 있는 기능을 제공한다.
// useEffect 생명주기에서 호출할 기능를 정의 콜백의 형태를 띄고있다.
const App = () => {
    // count : 상태 변수 값
    // setCount
    // useState(초기값)
    const [count, setCount] = useState(0);// useState 반환값이 배열이고 첫번째 요소는 상태 변수의 값 두번째 요소는 상태변수를 업데이트하는 함수
    const [name, setName] = useState("soon");

    // 내가 주시하는 상태가 변화했을때의 조건을 추가해서 실행해줄게
    // useEffect 생명주기에서 기능을 호출하는데 조건까지 어떤 상태변수가 변화하면 호출할 기능
    // useEffect 첫번째 매개변수로 콜백 함수를 전달해서 생명주기의 때에 호출을 할수있고
    // 두번째 매개변수는 배열의 값을 전달을 하는데 이 배열이 빈배열이면 마운트 배열에 주시할 값을 전달하게되면 마운트 + 업데이트 전달한 값이 변경될때마다 호출되는 값
    useEffect(()=>{

    }, []) // 최초에 한번 호출 마운트

    useEffect(()=>{

    }, [name]) // 최초에 한번 호출 그리고 name의 값이 변화할때마다 호출

    useEffect(()=>{
        if(count === 0) return // 이런 조건을 작성하면 업데이트만 마운트 제외
        // 업데이트 구문을 사용
        return () => {
            console.log("내가 이제 화면에서 보이지 않을거야.")
        } // 언마운트 컴포넌트가 화면에서 사라졌을때 보이지않을때
    }, [count]) // 최초에 한번 호출 그리고 count의 값이 변화할때마다 호출

    return <div>
        hello react
    </div>
}

 

 

2. Hook(훅)

2-1. Hook(훅)이란?

 

리액트의 함수형 컴포넌트에 상태 관리와 생명주기 기능을 쉽게 사용할 수 있도록 도와주는 기능입니다.

 

2-2. Hook(훅)의 등장 배경

 

훅(Hook)의 등장은 리액트에서 16버전 이후부터 제공하기 시작한 상태관리와 생명주기를 제어할 수 있는 기능입니다. 클래스형 컴포넌트에서는 상태와 생명주기를 다룰 수 있었지만, 훅이 등장하면서 함수형 컴포넌트에서도 상태관리와 생명주기 등을 제어할 수 있는 강력한 기능이 가능해졌습니다. 이를 통해 함수형 컴포넌트의 대한 사용도가 상승하면서 리액트는 더욱 간결하고 효율적인 방식으로 컴포넌트를 구현할 수 있게 되었습니다.

 

2-3. Hook(훅)의 종류

 

1. useState 

사용 목적 - 컴포넌트의 상태를 관리할 때 사용

상태 변수와 상태를 변경하는 함수를 반환

 

2. useEffect

사용 목적 - 컴포넌트의 생명주기에 맞춰 특정 작업을 실행할 때 사용

 

3. 등등 

 

다양한 훅의 종류가 있지만 다음 내용에서 알아볼 내용은 useState와 useEffect 입니다. 

결론

리액트의 함수형 컴포넌트는 간결하고 재사용 가능한 코드 작성이 가능하며, 훅(Hook)은 상태와 생명주기 관리 등을 함수형 컴포넌트에서 쉽게 처리할 수 있게 해줍니다. 훅의 도입으로 클래스형 컴포넌트의 제약을 넘어서, 함수형 컴포넌트의 유용성이 더욱 커졌습니다. 다양한 훅(useState, useEffect, 등등..)을 통해 컴포넌트의 기능을 효율적으로 관리할 수 있습니다. 결과적으로, 함수형 컴포넌트와 훅은 리액트를 더 간결하고 강력하게 만들었습니다.