[Next.js14 강의] 8강 - 컴포넌트 재사용 및 props 전달

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 컴포넌트를 재사용하는 방법과 props를 통해 데이터를 전달하는 방법을 학습합니다. 이를 통해 코드의 중복을 줄이고, 컴포넌트 간에 데이터를 효율적으로 전달하여 유지보수성을 높일 수 있습니다.

 

 

1. 컴포넌트 재사용의 중요성

 

컴포넌트 재사용의 개념

· 컴포넌트 재사용은 동일한 코드 블록을 여러 곳에서 사용할 수 있도록 컴포넌트를 일반화하는 작업입니다. 이렇게 하면 코드의 중복을 줄이고, 변경 사항을 쉽게 적용할 수 있습니다.
· 예를 들어, 버튼, 카드, 입력 필드와 같은 UI 요소를 재사용 가능한 컴포넌트로 만들어 여러 페이지에서 활용할 수 있습니다.

728x90

컴포넌트 재사용의 이점

· 코드 중복 최소화: 동일한 코드가 여러 곳에서 반복되지 않기 때문에 유지보수가 용이합니다.
· 일관된 UI: 동일한 컴포넌트를 사용하여 UI의 일관성을 유지할 수 있습니다.
· 유지보수성 향상: 변경 사항이 필요할 때, 하나의 컴포넌트만 수정하면 됩니다.

 

 

2. props란 무엇인가?

 

props의 정의

· props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되는 객체입니다. props는 읽기 전용이며, 자식 컴포넌트 내에서 수정할 수 없습니다.
· props를 통해 컴포넌트의 동작을 동적으로 제어할 수 있습니다.

반응형

props 전달 예제

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

 

· 이 예제에서 Greeting 컴포넌트는 name이라는 props를 받아 "Hello, Alice!"와 "Hello, Bob!"이라는 메시지를 출력합니다.

 

 

3. 컴포넌트 재사용 예제

 

재사용 가능한 버튼 컴포넌트 만들기

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

export default function App() {
  return (
    <div>
      <Button label="Click Me!" onClick={() => alert('Button clicked!')} />
      <Button label="Submit" onClick={() => console.log('Form submitted!')} />
    </div>
  );
}

 

· 위 예제에서 Button 컴포넌트는 label과 onClick이라는 props를 받아 버튼의 텍스트와 클릭 이벤트를 제어합니다. 이처럼 동일한 컴포넌트를 여러 용도로 재사용할 수 있습니다.

SMALL

재사용 가능한 카드 컴포넌트 만들기

function Card({ title, content }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: '20px', marginBottom: '10px' }}>
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Card title="Card 1" content="This is the first card." />
      <Card title="Card 2" content="This is the second card." />
      <Card title="Card 3" content="This is the third card." />
    </div>
  );
}

 

· Card 컴포넌트는 title과 content를 받아 다양한 카드 레이아웃을 만들 수 있습니다. App 컴포넌트에서 여러 개의 카드를 생성하여 재사용성을 극대화합니다.

 

 

4. props.children를 이용한 컴포넌트 재사용

 

props.children이란?

· props.children은 컴포넌트 태그 사이에 포함된 내용을 가리키는 특별한 props입니다. 이를 활용하면 컴포넌트 내부에 다른 컴포넌트를 포함시킬 수 있습니다.

props.children 사용 예제

function Panel({ title, children }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: '20px', marginBottom: '10px' }}>
      <h2>{title}</h2>
      {children}
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Panel title="Panel 1">
        <p>This is the content of Panel 1.</p>
      </Panel>
      <Panel title="Panel 2">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </Panel>
    </div>
  );
}

 

· Panel 컴포넌트는 props.children을 사용하여 다양한 콘텐츠를 받아들일 수 있습니다. App 컴포넌트에서는 Panel 내에 텍스트나 리스트 등을 포함시켜 재사용할 수 있습니다.

 

 

5. 고급 props 사용법: propTypes와 defaultProps

 

propTypes

· propTypes는 컴포넌트가 받을 수 있는 props의 타입을 정의하여 예상치 못한 에러를 방지합니다. 개발 중에만 경고를 출력하며, 실제 실행 시에는 영향을 미치지 않습니다.

import PropTypes from 'prop-types';

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

 

 

defaultProps

· defaultProps는 props가 전달되지 않았을 때 사용할 기본값을 정의합니다. 컴포넌트의 유연성을 높이면서도 안전하게 사용할 수 있습니다.

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

Button.defaultProps = {
  label: 'Default Button',
  onClick: () => alert('Default action'),
};

 

이 강의를 통해 컴포넌트를 재사용하는 방법과 props를 통한 데이터 전달 방법을 학습했습니다. 컴포넌트를 재사용하면 코드의 중복을 줄이고, 유지보수성을 크게 향상시킬 수 있습니다. props를 잘 활용하면 컴포넌트를 보다 유연하게 사용할 수 있습니다.

 

 

- 이전 수업 목록