2. 컴포넌트

여러 곳에서 한 객체가 반복적으로 사용될 때, component화 한다. 

 

Component without Props

- App.js

import './App.css';
import FirstComponent from './FirstComponent';

function App() {
  return <div>
    <FirstComponent />
    <FirstComponent />
    <FirstComponent />
    <FirstComponent />
    <FirstComponent />
  </div>
};

export default App;

 - FirstComponent.js

const FirstComponent = () =>{
    return <div> component </div>
}

export default FirstComponent;

만약 App.js(parent)에서 FirstComponent.js(child)로 변수(props)를 전달한다면 이를 child가 반영하여 parent로 다시 전달해줄 수 있다.

 

Component with Props

- App.js

import './App.css';
import FirstComponent from './FirstComponent';

function App() {
  /* return <FirstComponent /> */
  return <div>
    <FirstComponent />
    <FirstComponent name = "react" > 
      "hi"
    </FirstComponent>
    <FirstComponent name = "react-2" > 
      "hi 2"
    </FirstComponent>
    <FirstComponent name = "react-3" > 
      "hi 3"
    </FirstComponent>
  </div>
};

export default App;

- FirstComponent.js

const FirstComponent = props =>{
    return <div> new component for {props.name} <br/> 
    children : {props.children}
    </div>
}

FirstComponent.defaultProps = {
    name : '기본 이름'
}

export default FirstComponent;

props 값을 조회할 때마다 props.name, props.children과 같이 조회하는 작업을 더 편하게 하기 위해 다음과 같이 진행해보자.

Component with Props - 비구조화 할당 문법

- FirstComponent.js

import PropTypes from 'prop-types'

const FirstComponent = props =>{
    const {name, children} = props;
    return <div> new component for {name} <br/>
                children : {children}
    		</div>
}

export default FirstComponent;

// propTypes를 통해 type을 string으로, isRequired를 사용하여 필수 props로 지정합니다.
FirstComponent.propTypes = {
    name : PropTypes.string.isRequired
}

 

Component with useState

useState를 이용해서 변경되는 값을 update해보자.

- App.js

import './App.css';
import Say from './Say';

function App() {
  return <Say />
};

export default App;

- Say.js

import { useState } from 'react';

const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('안녕하세요');
    const onClickLeave = () => setMessage('안녕히가세요');

return(
    <div>
        <button onClick = {onClickEnter}> 입장 </button>
        <button onClick = {onClickLeave}> 퇴장 </button>
        <h1> {message} </h1>
    </div>
);
};

export default Say;