React Hooks - useState

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다.

함수형 컴포넌트는 클래스형 컴포넌트와는 다르게 인스턴스가 생성되지 않아, 코드의 규모가 커질수록 그 효용성을 더욱 발휘될 수 있다라고 한다. 따라서, 훅스의 사용을 권장하는 추세라고 한다!

훅스에는 여러가지 기능들이 있고, 앞으로 여러 기능들에 대해서 포스팅할 예정이다.

이번에는 가장 대표적으로 쓰이는 useState에 대해 간단히 알아보고자 한다.

useState는 간단히 말해 클래스형 컴포넌트에서 쓰였던, setState 메서드와 같이 state를 관리하는 기능이다.

리액트에서 useState기능을 사용하기 위해서는 아래와 같이 기능의 이름을 작성해주어야 한다.

import React, { useState } from "react";

그렇다면 실제 코드를 통해 useState가 어떻게 작동하는지 살펴보자!

const RetailerNavTab = () => {
  const [deleteAlertOn, setDeleteAlertOn] = useState(false);
  const handlerDeleteAlertOff = () => {
    setDeleteAlertOn(false);
  };
	return(
      { deleteAlertOn &&
        <ModalAlert
        handlerOff={handlerDeleteAlertOff}
        title={"소매 업체 삭제"}
        description={"삭제하시겠습니까?"}
        okBtnText={"삭제"}
        cancelBtnText={"취소"}
        />
  	  }
 	);
}

export default RetailerNavTab

위의 코드에서 다음 부분을 상세히 알아보자

const [deleteAlertOn, setDeleteAlertOn] = useState(false);

• useState(false)의 ()안에는 초기값을 넣어준다. 위 예제에서는 초기 state값은 false가 된다.
• deleteAlertOn 는 state이름이며, 상태값을 가지고 있는 변수라고 생각하면 된다.
• setDeleteAlertOn 는 해당 state값들을 제어해줄 메서드의 이름이라고 생각하면된다. 위 코드에서 handlerDeleteAlertOfff라는 함수를 만들고 실행되었을때 코드가 setDeleteAlertOn(false)라고 한다면, handlerDeleteAlertOff라는 함수가 실행되면 setDeleteAlertOn(false)가 동작하게되고, deleteAlertOn라는 state 값을 false로 바꿔준다. 쉽게말해 setState() 메서드와 동일하다고 생각하면 쉽다.