React ■ props

 

 

Props (데이터 주고 받기)

Props란?

Props는 컴포넌트끼리 서로 통신하며 데이터를 전달하는 방식입니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용됩니다.

 

부모 컴포넌트 vs 자식 컴포넌트

• 일반적으로 import된 컴포넌트가 자식 컴포넌트가 됩니다.
• 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달하고, 자식 컴포넌트는 이 데이터를 받아 처리합니다.

 

데이터 전달하기 (Props 사용)

• 자식 컴포넌트를 호출할 때, 키-값 형태로 데이터를 전달해야 합니다.
  1. anima는 JSX 괄호 안의 객체로, '키:값'의 형태를 가집니다.
  2. size는 하나의 값을 저장하는 변수로 사용됩니다.

 

데이터 전달받기 (Props 받기)

• 자식 컴포넌트는 전달받은 데이터를 받을 때 **( ) 안에 { }**를 사용해야 하며, 이 문법을 **구조 분해 할당 (destructuring)**이라고 부릅니다.
• 이때, 부모 컴포넌트가 전달한 이름을 그대로 사용하여 데이터를 받아야 합니다.

 

구조 분해 할당 (Destructuring)란?

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 도와주는 JavaScript 표현식입니다. 이 표현식은 ...변수명과 같이 표현되며, 여러 프로그래밍 언어에서도 찾아볼 수 있습니다.

 

Props에서 기본값 지정하기

전달받는 데이터에 기본값을 지정할 수 있습니다. 만약 아무런 값이 전달되지 않았을 경우, 지정된 기본값이 사용됩니다.

 

 

오늘은 Props에 대해 정리를 진행하였다! 그럼 20000!!!!!!