react 시작하기

React 공식문서의 빠른 시작만 읽어도 실무에서 자주 만나는 기본 개념은 대충 훑을 수 있다. 문제는 지금 졸리다는 것이다. 그러니 긴 설명은 치우고, React가 화면을 만드는 방식부터 데이터가 움직이는 방식까지만 한 번에 정리해보자.

React는 화면을 컴포넌트로 쪼갠다

React 앱은 컴포넌트라는 UI 조각으로 구성된다. 버튼처럼 작은 것도 컴포넌트고, 페이지 전체도 컴포넌트가 될 수 있다.

컴포넌트의 정체는 JSX를 반환하는 자바스크립트 함수다.

function MyButton() {
  return <button>버튼</button>;
}

export default function MyApp() {
  return (
    <div>
      <h1>내 앱</h1>
      <MyButton />
    </div>
  );
}

여기서 기억할 것은 하나다. 직접 만든 React 컴포넌트는 MyButton처럼 대문자로 시작하고, button이나 div 같은 HTML 태그는 소문자로 시작한다.

JSX는 HTML처럼 생긴 자바스크립트 문법이다

JSX는 HTML과 비슷하지만 조금 더 엄격하다.

• <br />, <img />처럼 태그를 닫아야 한다.
• 여러 태그를 반환할 때는 하나의 부모 태그로 감싸야 한다.
• 불필요한 태그를 만들기 싫다면 <>...</>를 사용한다.
• CSS 클래스는 class가 아니라 className으로 지정한다.

function Profile() {
  return (
    <>
      <h1 className="title">코헤</h1>
      <p>React 공부 중<br />하지만 졸림</p>
    </>
  );
}

JSX 안에서 자바스크립트 값을 사용하려면 중괄호를 쓴다.

const user = {
  name: '코헤',
  imageUrl: '/profile.png',
};

function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img src={user.imageUrl} alt={user.name + '의 프로필'} />
    </>
  );
}

문자열을 그대로 넣을 때는 따옴표, 변수나 계산 결과를 넣을 때는 중괄호라고 생각하면 편하다.

조건에 따라 다른 화면을 보여주기

React 전용 조건문이 따로 있는 것은 아니다. 평소 쓰던 자바스크립트 조건문을 그대로 쓴다.

function MyPage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <AdminPanel />;
  }

  return <LoginForm />;
}

JSX 안에서 짧게 처리하려면 삼항 연산자나 &&를 쓸 수 있다.

<div>
  {isLoggedIn ? <AdminPanel /> : <LoginForm />}
  {isAdmin && <DeleteButton />}
</div>

둘 중 하나를 보여줄 때는 조건 ? A : B, 조건이 참일 때만 보여줄 때는 조건 && A다.

배열은 map()으로 화면에 뿌린다

상품이나 게시글처럼 같은 모양의 데이터를 여러 개 보여줄 때는 배열의 map()을 사용한다.

const products = [
  { id: 1, title: '양배추' },
  { id: 2, title: '마늘' },
  { id: 3, title: '사과' },
];

function ProductList() {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
}

이때 각 항목에는 key가 필요하다. React가 어떤 항목이 추가되거나 삭제되거나 이동했는지 구분할 때 쓰기 때문이다. 배열의 순서보다 데이터의 고유 ID를 key로 사용하는 편이 안전하다.

클릭에 반응하려면 함수를 전달한다

버튼 클릭 같은 사용자 행동에는 이벤트 핸들러를 연결한다.

function MyButton() {
  function handleClick() {
    alert('클릭했다!');
  }

  return <button onClick={handleClick}>클릭</button>;
}

여기서 은근히 자주 틀리는 부분이 있다.

onClick={handleClick}   // 클릭했을 때 실행
onClick={handleClick()} // 렌더링하면서 즉시 실행

이벤트에는 함수를 호출한 결과가 아니라 함수 자체를 전달해야 한다.

화면이 값을 기억하게 하려면 State를 쓴다

버튼을 몇 번 눌렀는지처럼, 사용자 행동에 따라 값이 바뀌고 그 결과가 화면에도 반영되어야 한다면 State가 필요하다.

import { useState } from 'react';

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

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

  return (
    <button onClick={handleClick}>
      {count}번 클릭함
    </button>
  );
}

useState(0)은 다음 두 가지를 돌려준다.

• count: 현재 값
• setCount: 값을 바꾸는 함수

setCount()가 실행되면 React는 컴포넌트를 다시 렌더링하고, 바뀐 값을 화면에 보여준다. 일반 변수만 바꾼다고 React가 화면을 다시 그려주는 것은 아니다.

useState처럼 이름이 use로 시작하는 함수를 Hook이라고 한다. Hook은 컴포넌트 또는 다른 Hook의 최상단에서 호출해야 한다. 조건문이나 반복문 안에 넣으면 안 된다.

// 이렇게 쓰지 않는다.
if (isLoggedIn) {
  const [count, setCount] = useState(0);
}

컴포넌트끼리 데이터를 주고받을 때는 Props를 쓴다

부모 컴포넌트가 자식 컴포넌트에 값을 넘길 때 사용하는 것이 Props다.

function Greeting({ name }) {
  return <h1>안녕, {name}</h1>;
}

export default function MyApp() {
  return <Greeting name="코헤" />;
}

name="코헤"로 넘긴 값을 자식은 { name }으로 받아 사용한다. 문자열뿐 아니라 숫자, 객체, 배열, 함수도 전달할 수 있다.

여러 컴포넌트가 같은 값을 써야 한다면 State를 위로 올린다

버튼 두 개가 각각 자기 카운트를 가져야 한다면 각 버튼 안에 State를 두면 된다. 하지만 두 버튼이 항상 같은 숫자를 보여줘야 한다면 State를 공통 부모로 옮겨야 한다.

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <CounterButton count={count} onClick={handleClick} />
      <CounterButton count={count} onClick={handleClick} />
    </div>
  );
}

function CounterButton({ count, onClick }) {
  return <button onClick={onClick}>{count}번 클릭함</button>;
}

State는 부모인 MyApp이 가지고 있고, 현재 값과 클릭 함수는 Props로 각 버튼에 내려보낸다. 어느 버튼을 눌러도 부모의 count 하나가 바뀌므로 두 버튼이 함께 업데이트된다. 이것을 State 끌어올리기라고 한다.

여기까지만 기억하면 된다

React의 기본 흐름은 생각보다 단순하다.

1. 화면을 컴포넌트로 쪼갠다.
2. JSX로 화면 모양을 작성한다.
3. 중괄호로 자바스크립트 데이터를 넣는다.
4. 조건문과 map()으로 필요한 UI를 렌더링한다.
5. 이벤트 핸들러로 사용자 행동을 받는다.
6. 바뀌는 값은 State에 저장한다.
7. 부모가 자식에게 전달할 값은 Props로 내려준다.
8. 여러 컴포넌트가 같은 State를 써야 한다면 공통 부모로 끌어올린다.

한 문장으로 줄이면 이렇다. React는 State가 바뀌면 컴포넌트를 다시 렌더링하고, Props를 통해 그 데이터를 아래로 전달하는 방식으로 화면을 만든다.

이제 문서를 더 읽기보다 작은 카운터나 투두리스트를 하나 만드는 편이 빠르다. 버튼을 누르면 State가 바뀌고, 배열을 map()으로 그리며, 자식 컴포넌트에 Props를 넘겨보면 위 개념이 한꺼번에 연결된다.