[React] Quick Start :: 80% of React concepts

📄 Docs

2023년 3월에 리뉴얼된 리액트 공식 문서의 첫번째 장, "Quick Start"의 내용이다.

📚 You will learn

• 컴포넌트 생성 및 중첩
• 마크업과 스타일 추가
• 데이터 표시
• 조건부 렌더링과 목록 렌더링
• 이벤트 응답 및 화면 업데이트
• 컴포넌트 간 데이터 공유

---

1. Creating and nesting components

• 리액트는 컴포넌트로 구성된다.
• 컴포넌트는 자체 로직과 외관을 가진 UI의 일부이다.
• 컴포넌트는 버튼만큼 작을 수도 있고, 한 페이지 전체만큼 클 수도 있다.
• 리액트 컴포넌트는 마크업을 리턴하는 JS 함수이다.
• 컴포넌트의 이름은 대문자로 시작한다.

1-1) 컴포넌트 생성

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

1-2) 컴포넌트 중첩

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

2. Writing markup with JSX

• 대부분의 리액트 프로젝트는 편의성을 위해 JSX를 사용한다. (선택사항임!)
• JSX는 HTML보다 더 엄격하다.
• 모든 태그를 닫아줘야 한다. <br/>
• 컴포넌트는 여러 개의 JSX 태그를 반환할 수 없고 하나의 부모로 감싸야 한다. <div>...</div> 혹은 <>...</>
• HTML을 JSX로 변환해주는 converter를 사용할 수 있다. HTML to JSX
  

3. Adding styles

• className으로 CSS 클래스를 지정한다. HTML의 class 어트리뷰트와 동일하게 작동한다.

<img className="avatar" />

• 별도의 CSS 파일에 CSS 규칙을 작성한다.

/* In your CSS */
.avatar {
  border-radius: 50%;
}

• CSS 파일을 추가하는 방법을 규정하지 않는다. 환경에 따라 알아서 하면 됨!

4. Displaying data

• JSX를 사용하면 JS에 마크업을 넣을 수 있다.
• 중괄호 {} 를 사용하면 다시 JS로 돌아가서 유저에게 보여줘야 할 변수를 삽입할 수 있다.

return (
  <h1>
    {user.name}
  </h1>
);

• JSX 속성에서도 중괄호 {} 를 사용해 JS로 다시 돌아갈 수 있다.

return (
  <img
    className="avatar"
    src={user.imageUrl}                // 👈 여기
    alt={'Photo of ' + user.name}     // 👈 이런 복잡한 표현식도 가능

  />
);

5. Conditional rendering

• JS에서 사용하는 if문, 삼항연산자, logical && 구문을 사용하여 조건부로 JSX를 포함할 수 있다.

• if문

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

• 삼항연산자

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

• logical && 구문

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

6. Rendering lists

• JS의 for 반복문, map()을 이용해 목록을 렌더링한다.
• 문자열 혹은 숫자로 된 (형제 사이에서) 고유한 key 속성을 제공해야 한다.
  • 일반적으로 데이터베이스 ID 같은 data에서 가져온 값을 사용한다.
  • 삽입, 삭제, 재정렬을 할 때 리액트가 키를 사용한다.

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>
);

7. Responding to events

• 컴포넌트 내부에 이벤트 핸들러 함수를 선언해 이벤트에 응답할 수 있다.
  • 함수를 호출하지 않고 전달만 하면 된다! (함수명 뒤에 () 붙이지 말란 소리)

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

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

8. State : Updating the screen

• 컴포넌트가 일부 정보를 기억하고 표시하길 원할 경우, state를 사용한다.
• useState를 React import 받고, 컴포넌트 내부에서 state 변수를 선언한다.
  • 현재 state와 이를 업데이트하는 함수를 얻을 수 있다.
  • 이름은 마음대로 붙여도 되지만, 컨벤션은 👉 [something, setSomething]

import { useState } from 'react';

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

9. Using Hooks

• use로 시작하는 함수를 Hooks이라고 부른다.
• useState를 비롯한 built-in Hooks이 있다.
• 기존의 Hooks를 조합하여 custom hook을 만들 수도 있다.

9-1. Hooks의 제한사항

• Hook은 일반 함수보다 더 제한적이다.
• 컴포넌트 혹은 또다른 훅의 최상위 레벨에서만 훅을 호출할 수 있다.
• 조건문이나 반복문에서 useState를 사용하고 싶다면, 새 컴포넌트를 만들고 거기에 작성해야 한다.

10. Props, lifting state up : Sharing data between components

• 컴포넌트 간 데이터를 공유하고 함께 업데이트하게 하기 위해서는 해당 컴포넌트들을 포함하고 있는 가장 가까운 컴포넌트로 state를 이동해야 한다.

• JSX 중괄호를 이용해 컴포넌트에 정보를 전달할 수 있다.
• 이렇게 전달한 정보들을 props라고 부른다.
• 이 방식을 lifting state up (state 끌어올리기)라고 한다.

// 부모 컴포넌트
export default function MyApp() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

// 자식 컴포넌트
function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}