App.js

  
import Button from "./Button";
import styles from "./App.module.css";
import { useState, useEffect } from "react";
function App() {
  const [cnt,setValue]= useState(0); 
  const [Key, setKey]=useState("")
  const onClick= () =>  setValue((prev) => prev+1);
  const onChange=(event)=>setKey(event.target.value);

  console.log("계속 나오는애")
  useEffect(()=> {
    console.log("검색해봐");
  }, []);
  useEffect(()=>{
    if(Key!=="" &&Key.length>4){
      console.log(Key,'를 검색합니다');
    }
  }, [Key]); 
  useEffect(()=> {
    console.log("클릭됨");
  }, [cnt]);
  useEffect(()=> {
    console.log("변화가생김");
  }, [cnt, Key]);
  return (

    <div> 
      <input value={Key} onChange={onChange} type="text" placeholder="검색창"/>
      <h1 className={styles.title}>     
        {cnt}
      </h1>  
      <Button text={"레스고"} onClick={onClick}/>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button ({text, onClick}){
    return <button onClick={onClick} className={styles.btn}> {text} </button>;
 }

Button.propTypes={
    text: PropTypes.string.isRequired,
};

export default Button;

CLeanUp

  
import Button from "./Button";
import styles from "./App.module.css";
import { useState, useEffect } from "react";
function Hello(){ 
  useEffect(()  => {
    console.log("레스고 :)");
    return  () =>console.log(" 루우우 :(");
  }, []);
  return <h1> ㅎㅇ </h1>;
} 

function App() {
  const [show, setShow]=useState(false);
  const onClick=()=>setShow((prev)=>!prev); 
  return( 
  <div>
    {show ? <Hello /> :null} 
    <button onClick={onClick}>{show ? "숨기기":"나타나기"}</button>
     </div>
     );
}

export default App;

import styles from "./App.module.css";

import { useState, useEffect } from "react";

function App() {

const [cnt,setValue]= useState(0);

const [Key, setKey]=useState("")

const onClick= () => setValue((prev) => prev+1);

const onChange=(event)=>setKey(event.target.value);

console.log("계속 나오는애")

useEffect(()=> {