코딩 컨벤션

• React 컴포넌트 이름들은 **항상 첫 글자는 대문자로 시작**해야함

JSX

**JS 안에서 html 태그를 같이 사용**할 수 있도록 한 것 (javascript를 확장)

사용할 때 주의

반드시 하나의 부모 태그를 공유해야함

function AboutPage() {
  return (
    // parent tag 
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </> // parent tag
  );
}

useState

특정 **컴포넌트에 버튼 클릭한 횟수 같은 정보들을 저장(기억)**하고 싶을 때 useState를 사용한다.

useState는 2개의 인자를 얻는다. → const [현재 상태 값, 상태를 변경할 함수] = useState(상태 값)

아무 이름이나 부여할 수 있지만 보통 코드 컨벤션 → [something, setSomething] 같은 형식이다.

something 같은 value를 건들고 싶으면 setSomething 함수를 호출하면서 새로운 value를 넘기면 된다.

import { useState } from "react";

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

export default function App() {
  return (
    <div>
      <MyButton />
    </div>
  );
}

이런식으로 **각각의 컴포넌트마다 상태가 기억**되는 것이다.