컴포넌트 props

서론

React, Next를 공부하면서 다양한 컴포넌트를 받는 방법을 활용했습니다.

제가 사용한 방법은 총 3개이고 처음부터 지금까지 어떻게 사용했는지 작성해보려고 합니다.

 

해당 페이지에서 받는 props 가정

interface UserProps {
  name?: string
  email: string
  password: string
}

첫 번째 방법

const Users = (props: UserProps) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.email}</p>
      <p>{props.password}</p>
    </div>
  )
}

export default Users

props라는 객체를 직접 참조해서 사용해서 각각의 이름, 이메일, 패스워드를 받아서 사용했습니다.

 

두 번째 방법

const Users = ({ name, email, password }: UserProps) => {
  return (
    <div>
      <p>{name}</p>
      <p>{email}</p>
      <p>{password}</p>
    </div>
  )
}

export default Users

간결하게 사용할 수도 있고 필요한 속성에 바로 적용할 수 있는 방법입니다.

 

세 번째 방법

const Users: React.FC<UserProps> = ({ name, email, password }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{email}</p>
      <p>{password}</p>
    </div>
  )
}

export default Users

React.FC 라는 React 함수 컴포넌트를 정의하는 타입입니다. 제가 현재 사용 중에 있는 방법입니다.

React.FC를 사용하면 기본적으로 props가 Optional로 간주되어 속성이 필수인지 여부를 명시적으로 지정하지 않아도 됩니다. 이는 함수 컴포넌트의 props가 선택적으로 사용될 수 있는 경우에 유용합니다.

 

const Users: React.FC<UserProps> = ({ name: userName, email, password }) => {
  return (
    <div>
      <p>{userName}</p>
      <p>{email}</p>
      <p>{password}</p>
    </div>
  )
}

export default Users

이런식으로 변경해서 사용가능합니다.