[Kossie Coder] 자식 컴포넌트에 데이터 보내기 - props

// App.js

import React, { useState } from 'react';
🌟import Counter from './components/Counter';🌟
function App() {
  const [buttonName, setButtonName] = useState('클릭');
  const clickButton = () => {
    setButtonName('click');
  };

  return (
    <div className="App">
      <h1>Lami</h1>
      🌟<Counter click="click1" />🌟
      🌟<Counter click={buttonName} />🌟
      <Counter />
      <button onClick={clickButton}>Click</button>
    </div>
  );
}

export default App;

 

// App.js 기준 ./components/Counter.js

import React, { useState } from 'react';
const Counter = (props) => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };
  const clickString = props.click || 'Click';
  return (
    <button onClick={increment}>
      {clickString} {count}
    </button>
  );
};

export default Counter;

맨 오른쪽 Click 버튼 클릭 후

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */