React - 컴포넌트에 값 저장하기

이번 포스트는 https://iwoohaha.tistory.com/316 의 연장이다.

지난번 포스트에서는 버튼을 클릭하면 단순히 알럿 메시지를 표시하는 정도의 수정이었는데, 이번에는 버튼이 도대체 몇 번이나 클릭을 당했는지를 표시해보려고 한다.

 

컴포넌트에서 어떤 값을 관리하기 위해서는 상태(state)를 관리해야 하는데, 'react' 로부터 useState 를 import 하는 것으로부터 시작한다.

import { useState } from 'react';

 

node_modules 디렉토리 아래의 react 에서 export 하고 있는 컴포넌트가 무수히 많기 때문에 그 중에서 필요한 useState 만을 가져오기 위한 방법으로 { } 괄호 사이에 useState 를 사용하고 있는 것이다.

 

이렇게 상태관리를 위한 컴포넌트 useState 를 import 하고 나면 아래와 같이 상태관리용 변수와 상태값 변경용 함수를 선언할 수 있다.

const [count, setCount] = useState(0);

 

useState 에 추가한 값은 count 의 초깃값이다.

 

이렇게 상태가 관리되면, 상태값이 변경될 때마다 자동으로 렌더링이 발생하여 UI 가 업데이트된다.

 

완성된 코드는 다음과 같다.

import { useState } from 'react';

function MyButton() {

    const [count, setCount] = useState(0);

    function handleClick() {
        //alert('You clicked me!');
        setCount(count + 1);
    }

    return (
        <button onClick={handleClick}>I'm clicked {count} times!</button>
    )
}

export default MyButton;

 

실행한 상태에서 각 버튼을 몇 번씩 클릭해봤다.

MyButton 이라는 컴포넌트에서 상태를 관리한다면, 여러 개의 컴포넌트간의 그 상태값은 분리되어 관리될 수 있다.

 

반면, 4개의 버튼 컴포넌트가 어느 상태값을 공유하길 원한다면, MyButton 컴포넌트에서 상태를 관리하지 말고 그 상위인 MyApp 컴포넌트에서 상태를 관리하도록 변경해야 할 것이다.

 

우선 MyApp.js 에 상태값을 관리하는 코드를 아래와 같이 작성한다.

import logo from './logo.svg';
import './App.css';
import MyButton from './MyButton';
import { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);
    
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <MyButton />
        <MyButton />
        <MyButton />
        <MyButton />
      </header>
    </div>
  );
}

export default App;

 

이제 MyButton 컴포넌트에서는 상태를 관리하지 않아도 되므로 관련 코드는 모두 삭제하기로 하자.

//import { useState } from 'react';

function MyButton() {

//    const [count, setCount] = useState(0);

//    function handleClick() {
//        //alert('You clicked me!');
//        setCount(count + 1);
//    }

    return (
        <button onClick={handleClick}>I'm clicked {count} times!</button>
    )
}

export default MyButton;

 

버튼을 클릭했을 때 무언가를 수행해야 하므로 아직 정의되지 않았지만, handleClick 이 수행되게 놔두었다. 그리고 버튼에는 공유되는 count 값이 표시되도록 그대로 놔두었다.

버튼에 표시되는 count 값은 MyButton 컴포넌트 상위인 App 에서 관리되는 값이며, 이 값은 App 에서 변경해주어야 하므로 App 컴포넌트에 이벤트핸들러 함수를 작성한다.

import logo from './logo.svg';
import './App.css';
import MyButton from './MyButton';
import { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <MyButton />
        <MyButton />
        <MyButton />
        <MyButton />
      </header>
    </div>
  );
}

export default App;

 

마지막으로 남은 일은 MyButton 컴포넌트에게 count 값과 onClick 이벤트핸들러를 넘겨주는 작업이다.

App.js 에 기록한 MyButton 에 다음과 같이 기록한다.

        <MyButton count={count} onClick={handleClick} />
        <MyButton count={count} onClick={handleClick} />
        <MyButton count={count} onClick={handleClick} />
        <MyButton count={count} onClick={handleClick} />

 

MyButton 컴포넌트는 위 값을 받아서 사용하도록 수정되어야 한다.

//import { useState } from 'react';

function MyButton({ count, onClick }) {

//    const [count, setCount] = useState(0);

//    function handleClick() {
//        //alert('You clicked me!');
//        setCount(count + 1);
//    }

    return (
        <button onClick={onClick}>I'm clicked {count} times!</button>
    )
}

export default MyButton;

 

App.js 에서 count 와 onClick 이라는 이름으로 넘겼으므로, MyButton 컴포넌트에서도 받을 때 count 와 onClick 이라는 이름으로 받는다.

 

이제 프로그램을 실행시켜서 버튼을 누르면 버튼에 표시되는 모든 값이 동일하게 업데이트되는 것을 확인할 수가 있다.