[ReactJS] React Hooks - state, useState

React Hooks 는 React 16.8버전에 새로 추가된 기능으로 클래스 컴포넌트에서 사용할 수 있는 기능을 함수형 컴포넌트에서도 사용할 수 있도록 해주는 기능이다.

클래스 컴포넌트는 작성자도 사용해본 적이 없어서 검색을 해보았는데, javascript 클래스를 사용하여 정의한다. 클래스 컴포넌트에 대한 특징을 간단하게 정리해보았다.

• 상태(state): 컴포넌트 안에서 변화할 수 있는 데이터. this.state 로 관리.

• 라이프사이클 메소드: 컴포넌트가 생성, 업데이트, 제거될 때 호출되는 함수.
  
  컴포넌트가 DOM 에 처음 삽입될 때의 Mounting,
  상태나 props 가 변경되어 다시 렌더링 되는 Updating,
  컴포넌트가 DOM 에서 제거될 때의 Unmounting

현재는 React Hooks 가 생기면서 클래스 컴포넌트 보다 함수형 컴포넌트를 많이 사용되고 있으며, 작성자 또한 React Hooks 를 이용한 코드를 업로드 할 예정이다.

---

✨ useState 란?

state 는 컴포넌트가 갖고 있는 속성 중 하나이며, 이 속성값이 변하면 React 는 자동으로 UI 를 업데이트 해준다.

useState 는 React Hooks 중 하나로, 상태를 관리할 수 있다. 주로 const [state, useState] = useState(); 형식으로 사용할 수 있으며, 다음과 같은 형태로 사용된다.

• state(상태): 컴포넌트 내부에서 관리하는 값. 값이 변할 때마다 컴포넌트가 알아서 렌더링이 된다.
• useState: 상태 변수와 그 변수를 업데이트 해 줄 함수를 반환해준다.

 

✨ useState 예제 및 설명

예제코드

import styles from "./Hyunmer.module.css";
import { useState } from "react";

const Hyunmer3 = () => {
 const [name, setName] = useState("Jane");
  
  function changeName() {
  	setName(name === "Jane" ? "Dylan" : "Jane");
  }
  

  return (
    <div className={styles.title_container}>
      <h3>State, useState</h3>
      <p> {name} </p>
      <button onClick = {changeName}> Change! </button>
    </div>
  );
};

export default Hyunmer3;

코드분석

const [name, setName] = useState("Jane");

• name : 현재 상태 값.
• setName : state를 변경해주는 함수. 호출 시, 새로운 상태값이 name 에 저장되고 컴포넌트가 다시 렌더링 된다.
• useState("Jane") : name 이라는 상태 변수를 초기화. 그러니까, 처음에는 "Jane" 이 된다.

---

 function changeName() {
  	setName(name === "Jane" ? "Dylan" : "Jane");
  }

• changeName 함수는 name 이 Jane 일 때, Dylan 으로 변경하고, Dylan 일 때는 Jane 으로 변경해준다.

• 이 함수는 버튼을 클릭했을 때 호출된다.

---

 <p> {name} </p>
 <button onClick = {changeName}> Change! </button>

• {name} : name 을 화면에 표시해준다.
• button : 사용자가 버튼을 누르면 changeName 함수가 호출되어 name 값이 변경된다.

---

정리

1. 컴포넌트가 처음 렌더링 될 때, name 은 Jane 로 설정

2. 사용자가 버튼을 눌렀을 때마다 changeName 함수가 호출되고 name 은 Jane 과 Dylan 이 번갈아 가며 변경

3. 상태가 변경되면 컴포넌트가 자동으로 렌더링 되어 화면에 변경된 이름이 표시