출처: https://react.dev/learn

Creating and nesting components

리액트 앱은 컴포넌트로 만들어진다.
컴포넌트란 UI의 일부를 의미하고, 마크업을 반환하는 자바스크립트 함수이다.

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

위와 같이 컴포넌트는 대문자로 시작해야 한다.

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

위와 같이 다른 컴포넌트에 중첩하여 사용할 수 있다.

Writing markup with JSX

JSX란?

const element = <h1>Hello, world!</h1>;

위와 같은 마크업 문법을 JSX라고 한다. JSX는 element를 생성한다.
리액트는 마크업과 로직을 다른 파일로 분리하는 대신, 둘 다 포함하는 '컴포넌트'를 사용한다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

• JSX도 표현식이다!
• JSX는 HTML보다 자바스크립트에 가깝기 때문에 ReactDOM은 HTML 속성명 대신 camelCase 프로퍼티 명명 규칙을 사용한다. (class=>className)

조건부 렌더링

• 예시1

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

• 예시2

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

• 예시3

<div>
  {isLoggedIn && <AdminPanel />}
</div>

Component list rendering

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

위와 같이 products의 요소들을 map이나 for문을 사용하여 렌더링할 수 있다. 이때 주의해야 하는 점은 key에 각 항목을 고유하겍 식별하는 문자열이나 숫자를 전달해야한다는 것이다!

Responding to events

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

컴포넌트 내에서 이벤트 핸들러 함수를 선언할 수 있는데, 이때 onClick일 때에 전달하는 handleClick 함수 끝에 괄호를 생략해주어야 한다. 즉, 호출하는 것이 아니라 전달만 하면 된다는 것!
호출은 사용자가 button 요소를 클릭하면 일어난다.

useState

컴포넌트가 어떤 정보를 저장하거나 표시하기를 원할 때, react에서 useState를 사용할 수 있다.

import { useState } from 'react';

위처럼 불러온 뒤, 컴포넌트에 state 변수를 선언할 수 있다.

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

count 변수는 현재 state 변수이고, setCount는 state 변수를 업데이트할 수 있는 기능이다. state 변수를 변경하려면 새 값을 setCount에 전달하면 된다.

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

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

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

Hooks

use로 시작하는 함수를 Hooks라고 하고, 이는 react에서 찾을 수 있다.