[React] - 4차 -겹치는 코드 뭉쳐서 관리

1.

import './App.css';

import { useState, useEffect } from 'react';

import Counter from './components/Counter';  // 디렉토리 구조

function App() {

  const [name1, setName1] = useState("클릭!!");

  const clickBtn = () => {

    setName1("클릭변경함!");

  }

  return (

    <div className="App">

      <Counter click="클릭값"/>

      <Counter click={name1}/>

      <Counter />

      <br/>

      <br/>

      <button onClick={clickBtn}>두번째 버튼 변경!</button>

    </div>

  );

}

export default App;

---

2.

import React from "react";

import { useState, useEffect } from 'react';

const Counter = (props) => {

    const [num1, setNum1] = useState(0);

    const increment = () => {

      setNum1(num1+1);

    }

    const clickString = props.click || "받은 값 없음";

    return (

        <button onClick={increment}>전송버튼 ({clickString}) {num1}</button>

    );

}

export default Counter;

---

1번 코드에서 Counter 를 불러오고

click="클릭값" 으로 키="값" 형태로 보낸다

이것을 2번코드에서는 Counter 에서 props로 받아서 사용한다