1. React App 사용

React를 사용해주기 위해서 node.js를 깔아줌.
잘 깔렸다면 터미널에서 node -v를 입력하면 버전 정보가 잘 나올 것임.
npx까지 입력했을 떄 정상적으로 나오면 exit 후 clear

그리고 폴더를 하나 만들고 vs code로 불러옴
그리고 터미널을 열고

터미널에서
npx create-react-app (폴더명)을 입력하면
파일들이 install 되면서 이런 폴더가 깔릴 것임.

그리고 package.json을 우클릭한 후, 통합 터미널을 열어줌.
그리고 npm start를 입력해주면 react 서버가 브라우저를 통해서 열림.

src 폴더를 주로 건드리는데, 여기서 중요한 파일은 index.js 임. 그리고 app.js임

2 Effect

react.js에서 가장 멋진 점은 component를 새로 고침한다는 것임
새로운 데이터가 들어올 때마다 UI를 새로고침해줌

하지만 component 안에 한번만 실행하고 싶은 코드가 있을 수도 있음. 아니면, component 안에 특정 데이터가 변화할 때 실행해야 할 수도 있음.

useEffect는 이러한 문제를 해결해주는 function임
2가지 argumnet를 가지는데, 첫번째 argument는 우리가 실행하고 싶은 코드이고, 두번째 argument는 dependencies라고 불리는 것임. dependencies는 react.js가 지켜보는 것들임. dependencies가 변화할 때, react.js가 코드를 실행시킴.

  useEffect(() => {
    console.log("I run only once.");
  }, []);

이 useEffect는 console.log라는 코드를 실행하고, dependency는 가지고 있지 않음. (지켜볼 대상이 없기에 한번만 실행될 것임)

  useEffect(() => {
      console.log("I run when 'keyword' changes.");
  }, [keyword])

이 useEffect는 keyword가 변화할 때, 브라우저에 console.log를 찍어줄 것임.

useEffect(() => {
  console.log("I run when 'counter & keyword changes");
},[counter, keyword])

여러개 아이템을 동시에 지켜볼 수 있음(둘 중 하나면 변화해도 실행)

3. 정리

App.js (주석 처리 한거 잘 읽어보기)

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");// 2. keyword는 setKeyword라는 function으로 인해 변화 
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);// 3. setKeyword는 onChange라는 function에 의해 호출됨. 
  useEffect(() => {
    console.log("I run only once.");
  }, []);

  useEffect(() => {
      console.log("I run when 'keyword' changes.");
  }, [keyword]) // 1. keyword는 바로 state에 있는 값 
  useEffect(() => {
    console.log("I run when 'counter' changes.");
}, [counter])
useEffect(() => {
  console.log("I run when 'counter & keyword changes");
},[counter, keyword])
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange} // 4. onChange는 사용자 input이 변화할 때 호출됨 
        type="text"
        placeholder="Search here"
      />
      <h1> {counter} </h1> <button onClick={onClick}> Click me </button>{" "}
    </div>
  );
}

export default App;

App.module.css

.title {
    font-family: -apple-style, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 30px;
}

index.js

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



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);