[React] 함수 컴포넌트 props 사용

props

• react에서 페이지를 구성하는 최소단위로 하나의 블록을 만들어서 필요한 곳에 조립하여 개발
• 컴포넌트끼리 데이터를 주고받을 때는 props를 이용하며, props는 properties의 줄임말로 속성을 나타내는 데이터이다.

규칙!

• 컴포넌트의 이름은 반드시 이름은 대문자로 시작한다.
• 데이터는 부모→자식으로만 전달된다.

함수 컴포넌트와 클래스 컴포넌트가 있지만,예시에서는 함수 컴포넌트를 다뤘다.

//App.js 
import React from 'react';
import './App.css';
import Welcome from './components/Welcome';

function App() {
  return (
    <div className="App">
      <Welcome info={{ name: 'hyejin', age: 28 }} />
    </div>
  );
}

export default App;

//Welcome.js
import React from "react";

const Welcome = (props) => {
    const info = props.info; //  const {info} = props;
    return (
			<div>{info.name} {info.age}
			</div>
		);
}

//객체 구조분해할당 ( 위 코드와 같은 의미) 
//const Welcome = ({name,age}) => {
//    return (
//			<div>{name} {age}
//			</div>
//		);
//}

export default Welcome;

태그에 있는 속성의 값이 props를 통해서 전달이 된다.
>> info라는 객체인 속성이 props를 통해서 전달이 되며,
props.info로 객체를 받아와서 사용하거나 info 객체 속성들을 구조분해할당으로 받아와서 사용할 수 있다.