이번에는 리액트에서 컴포넌트 상태관리를 위한 함수를 소개해볼게요.

Hook

리액트에서 Hook은 함수 컴포넌트에서 컴포넌트의 상태와 생명주기를 관리하기 위해 사용되는 함수입니다. 리액트 공식문서에 따르면 클래스형 컴포넌트가 리액트의 진입장벽으로 작용한다고 합니다.

따라서 함수형 컴포넌트 개념이 발생하면서 비교적 최근에 나온 개념이란거죠.

요즘 추세는 클래스형 컴포넌트가 아닌 함수형 컴포넌트로 리액트를 작성해나가는 추세입니다.

그럼 클래스형 컴포넌트의 단점은 어떤게 있을까요?

• 로직 재사용 시 계층관계 발생으로 인한 어려움이 따른다.
• ComponentDidMount, WillUnmount, DidMount등과 같이 반복적으로 작성해야할 코드가 발생한다.
• JS의 클래스 문법의 활용도가 높아져, JS에 대한 체계적인 문법 이해도가 필요하다. 즉 러닝커브가 있다.

대충만 따져도 위 정도인데, 이를 함수형 컴포넌트로 말끔히 해결할 수 있다고 하니 배워보지 않을수 없습니다.

useState()

• useState는 함수형 컴포넌트에서 상탯값을 관리하게 해줍니다.

기본적으로 다음처럼 사용하죠

const [state, setState] = useState(INITIAL_STATE);

state는 일종의 변수라고 보시면 됩니다. 위 같은 문법은 배열 비구조화 문법을 이용해 받는것이므로, state와 setState의 이름은 임의로 저장할 수 있죠.

다음 코드를 보실까요?

import React, { useState } from 'react'
export default function Profile () {
    const [name,setName] = useState('');
    return (
        <div>
            <p>{`name is ${name}`}</p>
            <input type='text' value={name} onChange={e=>setName(e.target.value)}>
						</input>
        </div>
    )
}