컴포넌트에 props 전달하기

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/passing-props-to-a-component

1️⃣ React 컴포넌트 간 통신

부모 컴포넌트는 props를 통해 자식 컴포넌트에 데이터를 전달함

props는 읽기 전용이며, 컴포넌트의 동작을 설정하는 데 사용됨

2️⃣ props의 특징

HTML 속성과 유사하지만, 객체, 배열, 함수 등 모든 JavaScript 값을 전달할 수 있음

자식 컴포넌트는 전달받은 props를 활용하여 UI를 동적으로 구성할 수 있음

친숙한 props

1️⃣ props의 역할

JSX 태그에 전달하는 정보로, 컴포넌트의 동작과 스타일을 설정함

2️⃣ 예제 속성

className, src, alt, width, height 등은 <img> 태그에 전달 가능함

https://codesandbox.io/embed/xqc6vs?view=editor+%2B+preview&module=%2Fsrc%2FApp.js&expanddevtools=1

1️⃣ HTML 태그의 props

<img> 태그에 전달할 수 있는 props는 미리 정의되어 있으며, ReactDOM은 HTML 표준을 준수함

2️⃣ 사용자 정의 컴포넌트의 props

<Avatar> 같은 사용자 정의 컴포넌트에도 props를 전달할 수 있음

컴포넌트에 props 전달하기