02. 컴포넌트 (6) state를 전달받는 컴포넌트

출처 - 리액트를 다루는 기술(김민준 지음)

---

state를 컴포넌트 내부에서 사용하는 것 뿐만 아니라 자식 컴포넌트로 전달하여 실시간으로 다시 렌더링되도록 하는 것도 가능하다.

 

// Greeting.js
import React from 'react';

// state를 전달받기 때문에 괄호로 감싸줘야 한다
const Greeting = ({ username }) => {
  return <h1>{username}님 안녕하세요.</h1>;
}

export default Greeting;

 

import React, { useState } from 'react';
import Greeting from './Greeting';

function App() {
  const [username, setUsername] = useState('');
  return (
    <div className="App">
      <input value={username} onChange={(event) => { setUsername(event.target.value); }} />
      <Greeting username={username} />
    </div>
  );
}

export default App;

 

input 태그의 값이 바뀔때마다 렌더링도 바뀐다