Props

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 사용자 정의 속성
• 단방향 데이터 흐름(One-way binding)을 가지며, 부모에서 자식 방향으로만 데이터 전달
• 전달 받은 props는 자식 컴포넌트에서 직접 수정 불가
• 부모 컴포넌트에서 수정하면 자식 컴포넌트에서도 적용
• 간단한 데이터 구조에서는 사용

Props 사용 방법

• 부모 컴포넌트에서 자식 컴포넌트에 데이터 남겨주기

  • 부모 컴포넌트

    • 사용할 이름 = {넘겨줄 데이터} 로 이루어진 props속성을 부여

  • 자식 컴포넌트

    • 자식 컴포넌트에서 파라미터로 props 객체 받음
      • 이 때, 부모 컴포넌트에서 넘겨 줄 때 작성한 props.사용할 이름 으로 접근

• 자식 컴포넌트에서 부모 컴포넌트에 데이터 남겨주기

  • 부모 컴포넌트의 setState()를 자식 컴포넌트에 전달하고, 자식 컴포넌트에서 Props로 전달 받은 부모의 setState()를 호출하여 데이터 변경 가능

  • 부모 컴포넌트

    • 사용할 이름 = {넘겨줄 데이터}로 이루어진 props 속성을 부여

  • 자식 컴포넌트

    • 자식 컴포넌트에서 파라미터로 props 객체를 받음
      • 이 때 부모 컴포넌트에서 넘겨줄 때 작성한 props.사용할이름으로 접근