[React] React.js 강좌 13. useState

1. useState란?

 

리액트의 Hooks 기능 중 하나인 useState는 함수형 컴포넌트를 사용하는데 있어서 가장 많이 사용되는 컴포넌트 입니다.

컴포넌트에서 동적으로 변화되는 값을 state(상태)라고 부릅니다. 이 상태를 관리하기 위해 사용되는것이 useState라고하는 Hook입니다.

 

 

가장 유명한 버튼을 누르면 숫자가 바뀌는 카운터 예제를 보겠습니다.

 

src/Counter.js

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

 

const [number, setNumber] = useState(0);

useState를 사용할 때, state의 기본값을 파라미터로 넣어서 호출합니다.
이 함수를 호출하면 배열이 반환되는데, 여기서 첫번째 원소는 현재 상태,
두번째 원소는 Setter 함수입니다.

 

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

앞서 설명한 코드를 아래 3줄과 같이 작성할 수 있지만
배열 비구조화 할당을 통해 각 원소를 추출해서 위와 같이 [ , ]로 묶어서 사용합니다.

 

 

 

2. props를 이용해 state의 배열(Map)을 요소로 전달할 때

App.js

/***** App.js (함수형 컴포넌트) *****/

import React, { useState } from 'react';
import MyComponent from './components/MyComponent';

const App = () => {
  const [persons, setPersons] = useState([
    { id: 0, name: "ing-yeo", desc: "잉여인간" },
    { id: 1, name: "react", desc: "리액트" },
    { id: 2, name: "js", desc: "자바스크립트" },
  ]);

  return (
    <div>
      {persons.map(person => (
        <MyComponent key={person.id} person={person} />
      ))}
    </div>
  );
};

export default App;

 

MyComponent.jsx

/***** ./components/MyComponent.jsx (함수형 컴포넌트) *****/

import React from 'react';

const MyComponent = (props) => {
  const person = props.person;

  return (
    <div>
      <h1>{person.name}</h1>    
      <p>{person.desc}</p>
    </div>
  );
};

export default MyComponent;

 

 

ES6의 구조분해(Destructing)을 이용하면 MyComponent측의 코드를 더 간결하게 줄일 수 있습니다.

import React from 'react';

const MyComponent = (props) => {
  const { name, desc } = props.person; // 비구조화 할당 문법

  return (
    <div>
      <h1>{name}</h1>
      <p>{desc}</p>
    </div>
  );
};

export default MyComponent;