Viewer 컴포넌트 만들기

• src/ponent/Viewer.js

const Viewer = () => {
    return (
        <div>
            <div>현재 카운트 : </div>
            <h1>0</h1>
        </div>  
    );
};

export default Viewer;

• App.js

import './App.css';
import Viewer from './ponent/Viewer';

function App() {
  return (
    <div className="App">
      <h1>Simple Conter</h1>
      <section>
        < Viewer/>
      </section>
    </div>
  );
}

export default App;

Controller 컴포넌트 만들기

• src/ponent/Controller.js

import './App.css';
import Viewer from './ponent/Viewer';

function App() {
  return (
    <div className="App">
      <h1>Simple Conter</h1>
      <section>
        < Viewer/>
      </section>
    </div>
  );
}
export default App;

• App.js

import './App.css';
import Controller from './ponent/Controller';
import Viewer from './ponent/Viewer';

function App() {
  return (
    <div className="App">
      <h1>Simple Conter</h1>
      <section>
        < Viewer/>
      </section>
      <section>
        <Controller />
      </section>
    </div>
  );
}
export default App;

컴포넌트 스타일링

• src/App.css

body{padding: 20px;};
.App {margin: 0 auto; width: 500px;}
.App > section{padding: 20px; background-color: #f8f8f8; border: 1px solid #cccccc; border-radius: 5px; margin-bottom: 10px;}

<aside> 💡 Props

</aside>

• 컴포넌트 → 다른 컴포넌트로 데이터전달할때 사용
• 부모가 리랜더 / Props가 변경되면 → 자식 컴포넌트도 자동 리렌더