[Node] React 정리(9) - useState를 사용하여 배열 랜더링 및 추가/삭제 예제

리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useState를 이용하여 배열을 랜더링 하는 예제를 담았습니다. 

 

 진부한 예제이지만 useState의 기초와 사용법 에 대해 배워보도록 합시다.

 

 

# Contents

---

• 코드 작성 및 테스트

 

 

# 코드 작성 및 테스트

---

 리액트의 모든 코드는 src에서 정의할 수 있습니다. 따라서 코드를 수정하거나 추가할 때에는 src 폴더 안에 코드를 작성하거나 수정 하시면 되겠습니다.

 

 먼저 App.js 코드는 아래와 같습니다.

 

import "./App.css";
import react, { useRef, useState } from "react";
import UserList from "./UserList";
import CreateUser from "./CreateUser";

function App() {
    const [inputs, setInputs] = useState({
        username: "",
        email: "",
    });

    const { username, email } = inputs;

    const [users, setUsers] = useState([
        {
            id: 1,
            username: "velopert",
            email: "public.velopert@gmail.com",
            active: true,
        },
        {
            id: 2,
            username: "tester",
            email: "tester@example.com",
            active: false,
        },
        {
            id: 3,
            username: "liz",
            email: "liz@example.com",
            active: false,
        },
    ]);

    var next = useRef(4);

    return (
        <div>
            <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate} />
            <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
        </div>
    );

    function onChange(e) {
        e.preventDefault();
        const { name, value } = e.target;

        setInputs({
            ...inputs,
            [name]: value,
        });
    }

    function onCreate(e) {
        e.preventDefault();

        var addUser = {
            id: next.current++,
            username,
            email,
        };

        setUsers([...users, addUser]);
    }

    function onRemove(userId) {
        var newUser = [];
        users.map(({ id, username, email, active }) => {
            if (id !== userId) {
                newUser.push({ id, username, email, active });
            }
        });

        setUsers([...newUser]);
    }

    function onToggle(userId) {
        var user = users.map((user) => {
            return user.id === userId ? { ...user, active: true } : user;
        });
        setUsers([...user]);
    }
}

export default App;

 

 

 createUser.js 파일을 생성하고 그 안에 코드는 아래와 같습니다.

 

import React from "react";

function CreateUser({ username, email, onChange, onCreate }) {
    return (
        <div>
            <input name="username" placeholder="계정명" onChange={onChange} value={username} />
            <input name="email" placeholder="이메일" onChange={onChange} value={email} />
            <button onClick={onCreate}>등록</button>
        </div>
    );
}

export default CreateUser;

 

 userList.js 파일을 생성하고 그 안에 코드는 아래와 같습니다.

 

import react, { useRef, useState } from "react";

function UserList({ users, onRemove, onToggle }) {
    return (
        <div>
            {users.map((val) => (
                <User user={val} onRemove={onRemove} onToggle={onToggle} />
            ))}
        </div>
    );
}

function User({ user, onRemove, onToggle }) {
    return (
        <div>
            <h2>
                <b
                    style={{
                        backgroundColor: user.active ? "tomato" : "white",
                    }}
                    onClick={() => onToggle(user.id)}
                >
                    {user.id}{" "}
                </b>{" "}
                {user.email} {user.username} <button onClick={() => onRemove(user.id)}>삭제</button>
            </h2>
        </div>
    );
}

export default UserList;

 

결과는 아래와 같습니다.

 

 아이디 필드와 닉네임 필드에 값을 입력하게 되면 useState() 메소드를 통해 state 변수가 변하게 되고, 변환된 값들이 렌더를 다시 호출하여 보여지게 됩니다. userId 값을 클릭하게 되면 토글 함수가 호출되어 스타일이 변경되게 하였습니다.