4. React에서 Props의 정의와 사용법

Props란?

Properties의 줄임말으로

부모 컴포넌트에서 자식 컴포넌트로 내려주는 데이터입니다.

 

 

 

Props사용법

 

파일명 - Header.jsx

/*Header.jsx*/
export default function Header(props) {

    if(props.type === 'h1') {
        return <h1>{props.children}</h1>;
    } else {
        return <h2>{props.children}</h2>;
    }

}

 

파일명 - App.jsx

/*App.jsx*/
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios';
import Header from './Header'
function App() {

  return (
    <div>
        <Header type="h1">Hello</Header>
        <Header type="h2">world</Header>
    </div>
  )
}

export default App

 

 

 

 

출처 - https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%A4%EB%AC%B4%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0/dashboard