🎯 React의 props 개념에 대해 배우고, Modals 인터페이스를 생성합니다.

📗 Today I Learned

props

props는 "properties"의 줄임말로 리액트 컴포넌트에서 외부에서 값을 전달할 수 있게 해주는 객체입니다.

• 컴포넌트는 함수라서 props는 함수의 매개변수처럼 전달됩니다.

• 컴포넌트 내부에서는 props.이름으로 접근하거나, 구조 분해 할당{ 이름 }으로 꺼내 사용합니다.

예시 코드

MyWeather.tsx

import React from 'react';

interface MyProps {
  weather: string;
  children: React.ReactNode;
}

const MyWeather: React.FC<MyProps> = ({ weather, children }) => {
  return (
    <div>
      <p>{children}</p>
      오늘의 날씨는 {weather}입니다.
    </div>
  );
};

export default MyWeather;

app.tsx

import MyWeather from './MyWeather';

function App() {
  return (
    <div className='container'>
      <MyWeather weather='맑음'>일기 예보</MyWeather>
    </div>
  );
}

export default App;

• props는 <Component something="값" /> → Component({ something: "값" }) 의 형태로 전해집니다.

• children 은 <Component> 컴포넌트 태그 사이에 작성된 내용을 말합니다.

  • 여기에서는 "일기 예보"가 children에 해당됩니다.

---

Modal

Modal은 화면 위에 뜨는 팝업창 같은 UI 요소입니다.

예시 코드

import React from 'react';
import { Modal } from 'react-bootstrap';

type Todo = {
  id: number;
  text: string;
  isChecked: boolean;
};

type TodoModalProps = {
  show: boolean;
  todo: Todo | null;
  handleClose: () => void;
};

const TodoModal: React.FC<TodoModalProps> = ({ show, todo, handleClose }) => {
  return (
    <div>
      <Modal show={show} onHide={handleClose} centered>
        <Modal.Header closeButton>
          <Modal.Title>Todo 상세 정보</Modal.Title>
        </Modal.Header>
        <Modal.Body>{todo?.text}</Modal.Body>
      </Modal>
    </div>
  );
};

export default TodoModal;

• TodoModalProps : 모달 컴포넌트의 props의 타입을 정의합니다.

  • show : 모달 표시 여부

  • todo : 선택된 todo

  • handleClose : 닫기 버튼 클릭 시 실행되는 함수

• <Modal></Modal> : react-bootstrap을 활용하여 Modal 컴포넌트를 구성합니다.

  • ?. 을 활용하여 선택된 todo가 없어도 작동되게 합니다.

🤔 true나 false값만을 전달해도 작동되는 이유는 뭘까?

react-bootstrap의 Modal 컴포넌트는 내부적으로 show라는 props를 기준으로 모달을 보여줄지 말지를 결정하기 때문입니다.

즉, 내가 따로 구현하지 않아도, react-bootstrap이 show 값을 기준으로 다 처리해주어 값만 전달해도 작동합니다.

---

✏️ 회고

직접 타입을 설정해서 넣는 것이 익숙치 않아서 잘 연습해야 할 것 같다.