리액트는 사용자 인터페이스(UI)를 구축하기 위한 라이브러리로, 컴포넌트 기반 구조를 통해 효율적으로 관리할 수 있습니다. 이 글에서는 리액트에서 표를 구현하는 방법과 데이터 바인딩, 기본 스타일링에 대해 자세히 설명하겠습니다. 표는 많은 데이터를 시각화하는 데 유용한 도구로, 그리고 리액트의 장점을 살려 데이터를 동적으로 처리할 수 있습니다.

1. 리액트 표 컴포넌트 만들기

리액트에서 표를 만들기 위해 우선 데이터를 준비해야 합니다. 아래 예제에서는 간단한 사용자 목록을 보여주는 표를 구현할 것입니다.

1.1. 데이터 준비

표에 표시할 데이터를 준비하는 것은 첫 번째 단계입니다. 다음은 사용자의 이름과 이메일 주소를 포함하는 예제 데이터입니다:

const users = [
    { id: 1, name: "홍길동", email: "hong@example.com" },
    { id: 2, name: "김철수", email: "kim@example.com" },
    { id: 3, name: "이영희", email: "lee@example.com" }
];
    

1.2. 테이블 컴포넌트 생성

이제 테이블 구조를 만들기 위해 새로운 리액트 컴포넌트를 생성합니다. 이 컴포넌트는 상단에 제목 행과 각 사용자의 정보를 나열하는 행을 포함합니다.

import React from 'react';

const UserTable = ({ users }) => {
    return (
        
                {users.map(user => (
                    
                ))}
            

            

                

                    
ID
                    
이름
                    
이메일
                
            
            

                        
{user.id}
                        
{user.name}
                        
{user.email}
                    
        
    );
};

export default UserTable;
    

2. 사용자 데이터와 바인딩

이제 사용자 데이터를 이 테이블과 바인딩할 수 있습니다. 컴포넌트가 렌더링될 때, 데이터가 어떻게 표시되는지 알아보겠습니다.

2.1. 데이터 바인딩

데이터를 테이블 컴포넌트에 전달하는 방법은 props를 사용하는 것입니다. App 컴포넌트를 만들어 UserTable에 데이터를 전달합니다.

import React from 'react';
import UserTable from './UserTable';

const App = () => {
    const users = [
        { id: 1, name: "홍길동", email: "hong@example.com" },
        { id: 2, name: "김철수", email: "kim@example.com" },
        { id: 3, name: "이영희", email: "lee@example.com" }
    ];

    return (
        

            
사용자 목록
            
        
    );
};

export default App;
    

3. 기본 스타일링

사용자 인터페이스에서 스타일링은 매우 중요합니다. 테이블의 기본적인 스타일링을 추가하여 사용자 경험을 향상시킬 수 있습니다. 위의 코드를 수정하여 CSS를 추가해보겠습니다.

const tableStyle = {
    width: '100%',
    borderCollapse: 'collapse',
    marginTop: '20px',
};

const thStyle = {
    backgroundColor: '#007acc',
    color: 'white',
    padding: '10px',
    textAlign: 'left',
};

const tdStyle = {
    border: '1px solid #ccc',
    padding: '10px',
    textAlign: 'left',
};

const UserTable = ({ users }) => {
    return (
        
                {users.map(user => (
                    
                ))}
            

            

                

                    
ID
                    
이름
                    
이메일
                
            
            

                        
{user.id}
                        
{user.name}
                        
{user.email}
                    
        
    );
};
    

4. 동적 데이터 처리

리액트의 장점 중 하나는 상태(state)를 사용하여 데이터를 동적으로 업데이트할 수 있다는 것입니다. 이제 사용자 목록에 새로운 사용자를 추가할 수 있는 기능을 추가해보겠습니다.

4.1. 사용자 추가 기능 구현

사용자 목록을 관리하기 위해 useState 후크를 사용하여 사용자 상태를 관리합니다. 새로운 사용자 정보를 입력할 수 있는 폼을 추가하고, 이폼을 통해 사용자를 추가할 수 있습니다.

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

const App = () => {
    const [users, setUsers] = useState([
        { id: 1, name: "홍길동", email: "hong@example.com" },
        { id: 2, name: "김철수", email: "kim@example.com" },
        { id: 3, name: "이영희", email: "lee@example.com" }
    ]);
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');

    const addUser = () => {
        const newUser = {
            id: users.length + 1,
            name,
            email,
        };
        setUsers([...users, newUser]);
        setName('');
        setEmail('');
    };

    return (
        

            
사용자 목록
            
            
사용자 추가
             setName(e.target.value)}
                placeholder="이름"
            />
             setEmail(e.target.value)}
                placeholder="이메일"
            />
            추가
        
    );
};

export default App;
    

5. 결론

이번 글에서는 리액트에서 표를 구현하고, 데이터 바인딩 및 기본적인 스타일링을 적용하는 방법에 대해 알아보았습니다. 리액트를 사용하면 상태를 관리하고 데이터 바인딩을 통해 사용자의 동작에 반응하는 인터페이스를 쉽게 구현할 수 있습니다. 추가적인 기능(예: 사용자 삭제, 수정)을 통해 더욱 풍부한 사용자 경험을 제공할 수 있습니다.

리액트를 배우고 이를 활용하여 효과적인 UI를 개발하는 과정은 계속될 것입니다. 다양한 자료와 커뮤니티의 도움을 받아 성장해 나가기를 바랍니다.