컴포넌트 내보내기

컴포넌트를 내보내는 방법은 두 가지가 있다. 개인 스타일에 따라 적용하면 된다.

// 방법1
export default function Profile({image, name, title}) {
  return <div></div
}
    
// 방법2
function Profile({image, name, title}) {
  return <div></div>
}
    
export default Profile;

props 받아오기

부모로부터 props를 전달 받을 수 있다.

// props를 전달하는 부모 컴포넌트
function AppProfile() {
  return (
    <div className="App">
      <Profile name='Yong' title='Back-end' image='link'/>
      <Profile name='Song' title='Back-end' image='link'/>
      <Profile name='Tong' title='Front-end' image='link'/>
    </div>
  );
}

// 하나의 props를 받아 적용하는 방법
// 하나의 props를 받아 개별 value값들을 적용하려면 객체처럼 점 표기법을 사용하면 된다.
export default function Profile(props) {
  return (
    <div className="profile">
      <img src={props.image} />
      <h3>{props.name}</h3>
      <h4>{props.title}</h4>
    </div>
  )
}

// 여러개의 props를 받아 적용하는 방법
// 여러개의 props를 받는다면 꼭 {}로 감싸서 받아야 된다.
export default function Profile({image, name, title}) {
  return (
    <div className="profile">
      <img src={image} />
      <h3>{name}</h3>
      <h4>{title}</h4>
    </div>
  )
}

TIP

• 통상적으로 App.js에서 사용할 컴포넌트들을 만들때는 src > 새로운 폴더 ex)components를 생성하여 컴포넌트를 만든다.
• css이긴 한데 box-shadow를 더 쉽게 적용하는 사이트