[DevCamp] props와 모달을 활용한 컴포넌트 설계

동건·2025년 4월 9일

Props React devcamp 모달 컴포넌트

DevCamp

목록 보기

44/85

🌼 props와 모달을 활용한 컴포넌트 설계

props 의 사용

React에서 props는 컴포넌트 간 데이터를 전달할 때 사용하는 속성이다. 부모 컴포넌트에서 자식 컴포넌트로 값을 넘겨주기 위해 사용하며, 자식은 이 값을 읽기만 할 수 있다.

기본 예시

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

function App() {
  return <Welcome name="철수" />;
}

위 예제에서 App 컴포넌트는 Welcome 컴포넌트에 name이라는 props를 전달했다. Welcome은 이를 받아 JSX에서 사용할 수 있다.

구조 분해 할당과 함께 사용하기

function Welcome({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

구조 분해 할당을 이용하면 코드가 더 간결해진다. props가 여러 개인 경우에도 유용하게 사용된다.

모달 대화상자를 이용한 상세정보 구현하기

사용자 리스트 같은 데이터를 다룰 때, 특정 항목을 클릭했을 때 상세정보를 모달로 띄워주는 UI는 자주 사용된다. React에서는 상태(useState)를 활용해 모달을 열고 닫는 로직을 간단하게 구현할 수 있다.

예제 코드

import React, { useState } from 'react';

function UserDetailModal({ user, onClose }) {
  if (!user) return null;

  return (
    <div className="modal-backdrop">
      <div className="modal">
        <h2>{user.name}님의 정보</h2>
        <p>이메일: {user.email}</p>
        <button onClick={onClose}>닫기</button>
      </div>
    </div>
  );
}

function UserList() {
  const users = [
    { id: 1, name: '홍길동', email: 'hong@example.com' },
    { id: 2, name: '김철수', email: 'kim@example.com' },
  ];

  const [selectedUser, setSelectedUser] = useState(null);

  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {users.map(user => (
          <li key={user.id} onClick={() => setSelectedUser(user)}>
            {user.name}
          </li>
        ))}
      </ul>

      <UserDetailModal user={selectedUser} onClose={() => setSelectedUser(null)} />
    </div>
  );
}

설명

UserList 컴포넌트는 사용자 목록을 렌더링하며, 클릭한 사용자를 상태로 저장한다.
selectedUser가 존재하면 모달이 렌더링된다.
UserDetailModal은 props를 통해 데이터를 받아와 화면에 표시하고, 닫기 버튼으로 상태를 초기화한다.

간단한 스타일 예시 (CSS)

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  position: fixed;
  background: white;
  padding: 1rem;
  border-radius: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}