react 공부일지 - 컴포넌트

컴포넌트 만들기

components\Logo\index.js

import logo from './logo.svg';

function Logo() {
    return(
        <img src={logo} 
        className="App-logo" 
        alt="logo"
        />
    );
}

Logo.defaultProps = {
    size: 200
}

export default Logo;    

App.js

import './App.css';
import Logo from './components/Logo';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      </header>
    </div>
  );
}

export default App;

props 로 사이즈 인자 받기

index.js

import logo from './logo.svg';

function Logo(props) {
    return(
        <img src={logo} 
        className="App-logo" 
        alt="logo" 
        style={{ width: props.size, height: props.size }} 
        />
    );
}

App.js

import './App.css';
import Logo from './components/Logo';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Logo size={100} />
      </header>
    </div>
  );
}

export default App;

default props 정의

import logo from './logo.svg';

function Logo(props) {
    return(
        <img src={logo} 
        className="App-logo" 
        alt="logo" 
        style={{ width: props.size, height: props.size }} 
        />
    );
}

Logo.defaultProps = {
    size: 200
}

props type 제한 두기

import logo from './logo.svg';
import PropTypes from 'prop-types'

function Logo(props) {
    return(
        <img src={logo} 
        className="App-logo" 
        alt="logo" 
        style={{ width: props.size, height: props.size }} 
        />
    );
}

Logo.propTypes = {
    size: PropTypes.number
}

export default Logo;    

import PropTypes from 'prop-types'
import 해줘야함

비구조화 할당으로 props 정의

import logo from './logo.svg';
import PropTypes from 'prop-types'

function Logo({ size = 100}) {
    return(
        <img src={logo} 
        className="App-logo" 
        alt="logo" 
        style={{ width: size, height: size }} 
        />
    );
}

Logo.propTypes = {
    size: PropTypes.number
}

export default Logo;    

비구조화 할당으로 정의 시 default props 지정이 바로 가능