[React]props

🥕 props ( properites(속성)의 약자 )

부모 컴포넌트에서 자식 컴포넌트에 전달해 주는 값을 props 라고 함
 (key : value) 객체형태로 컴포넌트에 넘겨줄 수 있음

 

App.js (부모컴포넌트)

// 부모 컴포넌트
import React from 'react';
import Mypage from './Mypage';

function App() {
  return (
    <Mypage 
    	title="탕후루"
        name="귤"
        introduction="안뇽"
        width={2560}
        height={1440}
            />
  );
}
export default App;

 

🥕 문자열 이외에 정수, 변수, 다른 컴포넌트 등이 들어갈 경우 중괄호를 사용해서 감싸줘야 함

 

Mypage.jsx (자식 컴포넌트)

import React from 'react';

const Mypage = (props) => {
    return (
       <div>자식컴포넌트{props.title}</div>; //탕후루
       <div>자식컴포넌트{props.name}</div>; //귤
)};

export default Mypage;

 

 

🥕 중괄호 { }로 감싸주면 객체의 key에 해당하는 값만 전달가능
즉, 구조 분해(비구조화 할당)를 함

Mypage.jsx

import React from 'react';

const Mypage = ({title,name}) => {
    return (
       <div>자식컴포넌트{title}</div>; //탕후루
       <div>자식컴포넌트{name}</div>; //귤
)};

export default Mypage;

 

🥕 스프레드 구문 사용! ...props

=> App의 모든 props가 각각의 이름을 나열하지 않고 모두  Mypage로 전달

App.js

const App = (props) => {
    return (
        <div className="card">
      		<Mypage {...props} />
    	</div>
};

export default App;

 

 

🥕 햄버거처럼 중첩된 컴포넌트는 부모컴포넌트는 바로 아래의 컴포넌트를 children이라는 props로 받음

<Card>
  <Mypage />
</Card>

 

Card.jsx

import Mypage from './Mypage'; 

const Card = ({ children }) => {
  return (
    <div className="card">
      {children}  // Mypage
    </div>
  );
}

export default Card;

 

🥕  props의 기본값은 defaultProps로!

Card.defaultProps = {
    name: '이름 없음',
    nick: '별명 없음'
}

 

Card.jsx

import Mypage from './Mypage'; 

const Card = ({ name,nick }) => {
  return (
    <div className="card">
      {name}
    </div>
  );
}
// 기본값 정의
Card.defaultProps = {
    name: '이름 없음',
    nick: '별명 없음'
}
export default Card;

 

기본값을 name : '이름 없음' , nick : '별명 없음'으로 정의해줌

 

App.jsx

import Card from './Card'

function App() {
  return (
    <div>
      <Card name="감자"/>
    </div>
  );
}

export default App;

 

상위(부모) 컴포넌트인 App.js에서 하위(자식) 컴포넌트인 Card 의 props가

=> name= 감자, nick은 기본 값인 '별명 없음'으로 설정됨

import Card from './Card'

function App() {
  return (
    <div>
      <Card name="감자" nick="감자채"/>
    </div>
  );
}

export default App;

 

=> name= 감자, nick= 감자채로 설정됨