#5

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

function App() {
  return (
    <div>
      <h1 className={styles.title}>Welcome</h1>
      <Button text={"Continue"}></Button>;
    </div>
  );
}

export default App;

import PropTypes from "prop-types"; //Button.js
import styles from "./Button.module.css"
function Button({text}) {
    return <button className={styles.btn}>{text}</button>
};
Button.propTypes={
    text: PropTypes.string.isRequired,
};
export default Button;

#6

{
    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
    // 기존 특성에 대한 설명을 보려면 가리킵니다.
    // 자세한 내용을 보려면 <https://go.microsoft.com/fwlink/?linkid=830387을(를)> 방문하세요.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost에 대해 Chrome 시작",
            "url": "<http://localhost:3000>",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

포트가 8080이었더니 에러가 나서 리액트 기본 포트인 3000으로 바꿔줌

import Button from "./Button"
import styles from "./App.module.css"
import { useState, useEffect } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("")
  const onClick = () => setCounter((prev) => prev + 1)
  const onChange = (event) => {setKeyword(event.target.value)}
  useEffect(() => {
    console.log('Only once')
  }, []);
  useEffect(() => {
    console.log("I run when 'keyword' changes")
  }, [keyword]);
  useEffect(() => {
    console.log("I run when 'counter' changes")
  }, [counter]); 
  useEffect(() => {
    console.log("I run when keyword & counter change")
  }, [keyword, counter]); 

  return (
    <div className="App">
      <input 
        value={keyword}
        onChange={onChange}
        type='text' 
        placeholder="Search here" 
      />
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>click</button>
    </div>
  );
}

export default App;

import Button from "./Button"
import styles from "./App.module.css"
import { useState, useEffect } from "react";

function Hello() {
  function byFn() {
    console.log("bye");
  }
  function hiFn() {
    console.log("created");
    return byFn;
  }
  useEffect(hiFn, [])
  return <h1>Hello</h1>;
}
function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => {setShowing((prev) => !prev)}
  return (
    <div>
      {showing ? <Hello/> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;