230228 - React - Functional Component and Hook (함수형 컴포넌트와 Hook)

오늘 내가 배운 것

1. 함수형 컴포넌트

2. Hooks

3. 함수형 컴포넌트의 상태관리

4. 함수형 컴포넌트의 props

5. 함수형 컴포넌트의 생명주기 (라이프사이클)

 

1. 함수형 컴포넌트

함수형 컴포넌트는 클래스형보다 코드가 간단하고, 가독성이 높다. 원래 함수형 컴포넌트는 기존에도 있었지만 상태를 관리하기 위해선 클래스 컴포넌트만 사용했어야 했는데 ver.16.8부터 React Hooks 개념이 생기면서 상태를 관리할 수 있게 되었다.

 

그래서 최근에는 함수형 컴포넌트를 이용한 React가 많다.

 

 

2. Hooks

대표적인 Hook으로 2가지 `useStete` 와 `useEffect` 가 있다.
이외에 메모이제이션 기능을 하는 `useMemo`, `useCallback`이 있다.

•  useStete : 상태를 관리하는 함수
•  useEffect : 라이프사이클(생명주기)와 같은 역할을 하는 함수
•  useMemo : 메모이제이션 기능을 하는 함수로 컴포넌트 내부에서 연산된 값을 재사용할 때 사용한다.
•  useCallback : 함수를 메모이제이션하여 컴포넌트 리렌더링 성능을 최적화할 수 있는 hook이다.

 

메모이제이션 : https://baekspace.tistory.com/51

221103 JavaScript - 메서드, this, 생성자함수, getter, setter, 피보나치 수열, 메모이제이션

 

2-1. useMemo VS useCallback

두 개의 함수 모두 성능 최적화를 위해 사용되지만 두 개는 서로 다른 용도를 가지고 있다.

useMemo의 경우에는 함수의 결과 값을 저장하고, 의존성 배열의 값이 변경될 때 값을 다시 계산하여 불필요한 렌더링을 방지한다.

useCallback의 경우에는 함수 자체를 메모이제이션하고, 의존성 배열의 값이 변경될 때 함수를 다시 생성하여 불필요한 렌더링을 방지한다.

useMemo는 계산 결과 값을 저장하고, useCallback은 함수 자체를 저장한다.

 

 

 

3. 함수형 컴포넌트의 상태관리

함수형 컴포넌트에선 상태관리를 위해 `useState`라는 함수를 이용하여 관리한다.

 

const [`현재 상태 값`, `상태를 변경하는 함수`] = useState(`초기값`)

초기값 생략 시 undefined가 된다.

`현재 상태 값`은 useState 함수를 호출하게 되면 초기값이 전달되어 현재 상태 값에 대입된다.
`상태를 변경하는 함수`는 상태값을 변경할 때 사용하는 함수다.

 

3-1. `useState` 예시

//counter.jsx

import React, { useState } from "react"
const Counter = () => {
    const [count, setCount] = useState(0)
    const increment = () => {
        setCount(count + 1)
    }
    const decrement = () => {
        setCount(count - 1)
    }
    return (
        <div>
            <h1>Counter : {count}</h1>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
        </div>
    )
}
export default Counter

함수형 컴포넌트에는 render()가 없다. 클래스형 컴포넌트에는 render()가 있어서 상태가 변화하면 render()가 재실행되지만 함수형 컴포넌트는 상태가 바뀔 때마다 함수형 컴포넌트 자체가 다시 실행이 된다.

코드에 `React`를 사용하는 곳이 없는데, React를 같이 import 하는 이유는 JSX문법으로 사용하기 위해서이다. JSX를 변환하는 과정에서 React.createElement가 있기 때문에 이를 인식하기 위해서 작성한다.

 

 

 

4. 함수형 컴포넌트의 props

//app.jsx
<LoginBox name="baekspace" />

//LoginBox.jsx
const LoginBox = (props) => {
    console.log(props) // object {name:baekspace}
}

를 이용하여 props를 사용할 수 있다. 필요에 따라 구조 분해 할당으로 사용할 수 있다.

 

 

 

5. 함수형 컴포넌트의 생명주기 (라이프사이클)

`useEffect`는 2가지 인자값을 갖는다. 

 

첫 번째 인자는 콜백함수가 들어가고, 두 번째 인자에는 배열이 들어간다. 

두 번째 인자인 배열에 포함된 값이 변경될 때 `useEffect`의 첫 번째 인자인 콜백 함수가 실행된다. 배열을 빈배열로 전달하면 props와 state는 항상 초기값을 가진다.

이를 이용해서 클래스형 컴포넌트에서 생명주기를 위해 사용했던 `componentDidMount`, `componentDidUpdate`를 유사한 역할을 할 수 있다.

useEffect 함수를 한 컴포넌트에 써야 하는 횟수가 정해져 있지는 않지만, 너무 많은 함수는 가독성에 좋지 않기 때문에 컴포넌트를 더 쪼개서 사용하는 방법도 있다.

 

5-2. `useEffect` 예시

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

const LoginBox = (props) => {
    const [isLogin, setIsLogin] = useState(false)

    useEffect(() => {
        console.log("componentDidMount")
    }, [])

    useEffect(() => {
        console.log("componentDidUpdate")
    }, [isLogin])

    console.log("함수가 렌더링 됨")
    return (
        <div>
            <button onClick={() => setIsLogin(!isLogin)}>{isLogin ? "Logout" : "Login"}</button>
        </div>
    )
}

export default LoginBox

 

 

---