[react] Button 클릭 시, 데이터 추가하기

개요

• react 에서 Button 컴포넌트 하나를 추가 후, 해당 버튼을 클릭하면 데이터가 하나씩 추가되어 화면에 출력되는 코드를 작성해 봅니다.

리액트 프로젝트 생성

• 먼저 리팩트 프로젝트를 생성합니다.

npx create-react-app myapp

• 위 명령어를 통해 프로젝트 생성을 할 수 있습니다.

App.js 코드 작성

• 위에서 CRA 로 리액트 프로젝트가 성공적으로 생성되었다면, 기본으로 App.js 파일이 생성됩니다.
• 해당 코드를 아래와 같이 작성해 줍니다.

import "./App.css";
import { useState } from "react";

function App() {
    const array = [
        { id: 1, name: "Alice" },
        { id: 2, name: "BoBo" },
        { id: 3, name: "BiBi" },
    ];
    const [names, setNames] = useState(array);
    const handleClick = () => {
        const newItem = { id: 4, name: "BeomBeomJoJo" };
        setNames((current) => [...current, newItem]);
    };
    return (
        <div>
            <div>
                <button onClick={handleClick}>Push to state array</button>
            </div>

            {names.map((element, index) => {
                return (
                    <div key={index}>
                        <h2>
                            {element.id} / {element.name}
                        </h2>
                    </div>
                );
            })}
        </div>
    );
}

export default App;

• 위 코드를 간단히 설명을 하자면, Button 컴포넌트 하나를 추가하였습니다.
• array 변수에는 기본으로 Alice, BoBo, BiBi 3개의 아이템이 들어 있습니다.
• handleClick 함수를 통해, Button 클릭 이벤트가 발생할 때 마다 BeomBeomJoJo 의 이름을 가진 사람이 추가되도록 합니다.
• map 을 통해 추가되는 학생들을 전부 출력해 줍니다.

출력 결과