React 기본 개념 요약

React 문서에 오신 것을 환영합니다! 이 페이지에서는 매일 사용하게 될 React의 핵심 개념 80%를 빠르게 소개합니다.

컴포넌트 생성 및 중첩

React 앱은 컴포넌트들로 구성됩니다. 컴포넌트는 UI의 일부분이며, 작게는 버튼에서 크게는 전체 페이지까지 만들 수 있습니다. React 컴포넌트는 마크업을 반환하는 자바스크립트 함수입니다.

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

컴포넌트를 다른 컴포넌트 안에 중첩할 수도 있습니다.

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

React 컴포넌트 이름은 반드시 대문자로 시작합니다.

JSX로 마크업 작성

React는 대부분 JSX라는 문법을 사용합니다. JSX는 HTML과 비슷하지만 더 엄격합니다. 모든 태그를 닫아야 하며, 여러 요소를 반환하려면 부모 요소로 감싸야 합니다.

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

스타일 추가

React의 스타일 지정은 HTML의 class 대신 className을 사용합니다.

<img className="avatar" />

CSS 파일에 규칙을 작성하거나, 빌드 도구의 가이드에 따라 CSS를 추가할 수 있습니다.

데이터 표시하기

JSX에서는 중괄호 {}를 이용해 자바스크립트 변수나 표현식을 삽입할 수 있습니다.

return (
  <h1>{user.name}</h1>
  <img className="avatar" src={user.imageUrl} alt={'Photo of ' + user.name} style={{ width: user.imageSize, height: user.imageSize }} />
);

조건부 렌더링

일반 자바스크립트 코드(예: if 문, 삼항 연산자, &&)를 사용해 UI를 조건부로 렌더링할 수 있습니다.

{isLoggedIn ? <AdminPanel /> : <LoginForm />}
{isLoggedIn && <AdminPanel />}

리스트 렌더링

배열의 map() 함수를 사용해 컴포넌트 목록을 만들 수 있습니다. 각 항목에는 반드시 key 속성을 지정합니다.

const products = [{ title: 'Cabbage', id: 1 }, ...];
const listItems = products.map(product =>
  <li key={product.id}>{product.title}</li>
);
return <ul>{listItems}</ul>;

이벤트에 응답

컴포넌트 내부에 함수를 선언하여 이벤트를 처리합니다.

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

핸들러 함수 전달 시 ()를 쓰지 말아야 합니다.

화면 업데이트 - State

React 컴포넌트가 정보를 기억하려면 useState Hook을 사용합니다.

import { useState } from 'react';
function MyButton() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }
  return (
    <button onClick={handleClick}>Clicked {count} times</button>
  );
}

각 컴포넌트마다 독립적인 state가 생성됩니다.

컴포넌트 간 데이터 공유

서로 다른 컴포넌트 간에 상태를 공유하고 싶을 때, 상태를 공통 부모로 끌어올리고 자식 컴포넌트에 props로 내려 줍니다.

import { useState } from 'react';
export default function MyApp() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }
  return (
    <div>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}
function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>Clicked {count} times</button>
  );
}

이 방법을 "state 끌어올리기(lifting state up)"라고 부르며, 여러 컴포넌트가 하나의 상태를 공유할 수 있게 됩니다.

다음 단계

React의 기본 구조와 코드를 이해했다면, 자습서(틱택토 게임 제작)를 통해 실습을 해 보세요.

출처 및 참고 : 빠르게 시작하기 – React