리액트는 사용자 인터페이스(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 (
ID
이름
이메일
{users.map(user => (
{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 (
사용자 목록
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 (
ID
이름
이메일
{users.map(user => (
{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를 개발하는 과정은 계속될 것입니다. 다양한 자료와 커뮤니티의 도움을 받아 성장해 나가기를 바랍니다.