[React] Props

Props

• 부모 컴포넌트로 부터 자식 컴포넌트로 데이터를 전달할 때 사용
• props로 전달된 데이터는 자식 컴포넌트에서 readonly! 처럼 사용 (변경 불가)

 

 

props 전달

• 여러 개의 props 전달과 비구조화 할당(구조 분해)
• 객체나 배열에서 해당 묶음 구조를 풀이해서 작성
• 객체나 배열 내부의 요소들을 한 번에 각각의 요소의 변수에 할당

 

(자식 컴포넌트)
function ChildComponent(props: { name: string }) {
  // props.name = '이도경'; - Error (readonly 속성)
  return (
    <div>안녕하세요. {props.name}</div>
  )
}

(타입 선언)
type MultiPropsType = {
  name: string;
  colorProps: string;
}

(부모 컴포넌트)
function MultiProps({ name, colorProps }: MultiPropsType) {
  // {name, age}의 매개변수에
  // 데이터 person을 전달 (person = {name: '홍동현', age: 50})
  // >> name=person.name, age=person.age
  return (
    <div style={{ color: colorProps}}>반갑습니다. {name}님</div>
  )
}

// 기본 속성값 지정
// : 컴포넌트 호출 시 props를 전달하지 않을 경우 지정될 기본값
// 컴포넌트명.defaultProps = { 기본속성: '기본값' }
MultiProps.defaultProps = {
  name: '황상기'
}

export default function Props01() {
  const props = {
    colorProps: 'orange',
    name: '박영준'
  }

  return (
    <div>
      {/* props의 경우 객체로 전달! */}
      <Wrapper>
      <ChildComponent name='홍동현' />
      <ChildComponent name='홍길동' />
      </Wrapper>
      {/* 여러 개의 props 전달 */}
      <MultiProps name='이기석' colorProps='pink' />
      {/* 
      ...props가 구조 분해 할당을 사용하여 각각의 속성명을 찾아감 
      */}
      <MultiProps {...props} />
      <MultiProps colorProps='purple' />

    </div>
  )
}

 

(예제 코드)

(타입 선언)
type User = {
  name: string;
  age: number;
  email: string;
}

props 데이터는 변수, 객체든 상관없이 무조건 {}객체 내에 작성
: 객체의 데이터를 한번에 받아오기 위해서는 본인의 {}객체 틀 외에 또 다른 {}객체 틀로 묶어야 함
type UserCardProps = {user: User}

(자식 컴포넌트)
const UserCard = ({user}: UserCardProps) => {
  console.log(user.name);
  console.log(user.age);

  const {name, age, email} = user; // 구조분해할당
  console.log(name);
  console.log(age);
  console.log(email);
  
  return(
    // 단일 루트 노드: JSX는 반드시 하나의 루트 태그를 가져야 함!
    <div>
      <h4>{user.name}</h4>
      <p>Age: {age}</p>
      <p>Age: {user.age}</p>

      <p>Email: {email}</p>
      <p>Email: {user.email}</p>
    </div>
  )
}

(다른 컴포넌트를 감싸는 Wrapper 컴포넌트)
type childrenType = {
  // ReactNode: React 내의 HTML 요소들 + 사용자 정의 컴포넌트들의 타입
  children: React.ReactNode;
}
export const Wrapper = ({children}: childrenType) => {

    return(
      <div style={{border: '2px solid black', padding: '16px', backgroundColor: 'green'}}>
        {/* props로 전달받은 React의 HTML 요소들 + 사용자 정의 컴포넌트 (UI) */}
        {/* UI가 태그 내에 담길 경우 반드시 열리고 닫히는 태그 사이에 내용으로 첨부 */}
        {children}
      </div>
    )
}

(부모 컴포넌트)
export default function Props02() {
  const userData = {
    name: '홍동현',
    age: 50, 
    email: 'qwe213'
  }
  return (
    <Wrapper>
      {/* props는 반드시 매개변수명 = {전달할 데이터} */}
      <UserCard user={userData} />
      <UserCard user = {{ name:'이도경', age:60, email: 'qwer1234' }}/>
      {/* <UserCard name='홍동현' age=50 email= 'qwe123'/> */}

    </Wrapper>
  )
}