[React 학습하기] Quick Start

학습 목적

• React의 기초 지식이 모자라다는 생각이 들어 직접 학습하기로 마음먹음
• 어떤 강의보다도 리액트 공식 문서가 믿음직스럽기 때문에 선택

이 페이지에선 당신이 매일 사용하게 될 React 개념의 80%를 소개합니다.

Creating and nesting components

리액트 앱은 컴포넌트로 만들어진다.
컴포넌트는 고유한 로직과 외형을 가진 UI의 일부이다. 컴포넌트는 버튼만큼 작기도 하고 전체 페이지만큼 크기도 하다.

리액트 컴포넌트는 마크업을 반환하는 Javascript 함수이다.

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

우리는 MyButton 컴포넌트를 선언했기 때문에, 또다른 컴포넌트에 중첩할 수 있다.

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

여기서 주의해야할 점은 우리는 컴포넌트를 파스칼 표기법으로 작성해야한다.
반면에 HTML 태그는 소문자로 작성하면 된다.

Writing markup with JSX

우리가 위에서 사용한 마크업 구문은 JSX라 한다. 이는 선택이지만, 대부분의 프로젝트들은 편의성을 위해 JSX를 사용한다.

JSX는 HTML보다 엄격하다. 또, 구성 요소는 여러 JSX 태그를 반환할 수 없기 때문에 <div></div> 또는 <></> 래퍼와 같은 공유 상위 항목으로 래핑해야한다.

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

Adding styles

React에서 CSS 파일을 추가하는 방법을 규정하지 않기 때문에 우리는 기존 HTML에서 사용했던 방법과 같은 방식으로 className을 사용하거나 <link>태그를 추가하면 된다.

<img className="myimg" />

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

Displaying data

그렇다면 JSX를 사용했을 때 데이터를 어떻게 표시할까?
우리는 중괄호{}를 이용해 코드에서 일부 변수를 포함하고 사용자에게 표시할 수 있도록 할 수 있다.

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

우리는 또한 마크업에서 변수를 사용하고 싶을 수도 있다.
이때도 우리는 중괄호{}를 이용할 수 있다.

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

만약 우리가 태그에 인라인 스타일을 추가하고 싶다면
style={{}}을 사용하면 된다. style = {}의 안에 있는 {}는 일반 객체를 나타낸다.

Conditional rendering

React에서 특별한 작성 구문은 존재하지 않는다.
그렇기 때문에 우리는 Javascript에서 사용했던 일반적인 문법 그대로 사용하면 된다.

만약 if문을 사용하고 싶다면

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

만약 짧은 코드를 선호한다면 삼항연산자를 사용하고

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

else가 필요 없다면 아래와 같이 작성하면 된다.

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

Rendering lists

for 루프 및 map() 함수와 같은 Javascript 기능을 사용해 구성 요소 목록을 렌더링할 수 있다.

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

여기서 주의해야할 점은 React는 키를 사용하여 아이템들이 삽입, 삭제, 또는 재정렬되었는지 알 수 있기 때문에 <li>에 키 속성을 할당 했는지 확인해야한다.
목록의 각 항목에 대해 해당 항목을 고유하게 식별하는 문자열이나 숫자를 전달하자.

Responding to events

우리는 컴포넌트 안에 이벤트 핸들러 함수를 선언함으로써 이벤트에 응답할 수 있다.

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

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

onClick={handleClick} 끝에 괄호가 없다는 점에 주목하자. 이벤트 핸들러 함수를 호출하지 않고 단지 전달하기만 하면 된다! 사용자가 버튼을 클릭하면 React는 이벤트 핸들러를 호출한다.

Updating the screen

종종, 우리는 컴포넌트가 어떤 정보를 기억하고 이를 보여주길 바란다.
우리가 버튼을 클릭했을때 그 만큼 숫자가 더해지는것을 원한다면, 우리의 컴포넌트에 useState를 이용하면 해결된다.

import { useState } from 'react';

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

우리는 useState에서 현재의 상태를 나타내는 count, 우리가 count를 업데이트할 수 있게 하는 함수 setCount 두 가지를 얻을 수 있다.
이름은 자유롭게 지어도 되지만 [something, setSomething] 이처럼 작성하는게 관례이다.

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

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

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

처음 렌더링 되었을 때 count는 0이다. (우리가 useState에 0을 입력했기 때문에)
버튼에 handleClick를 전달했기 때문에 클릭하게 되면 setCount가 불러지며 count는 1, 2, ... 1씩 커진다.

만약 우리가 같은 컴포넌트를 여러번 부르게 된다면, 각 컴포넌트는 고유의 state를 가지게 되고 버튼 클릭은 개별적이게 된다.

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

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

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

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

Using Hooks

use로 시작하는 함수들을 우리들은 Hooks라 부른다.
useState는 React에서 제공하는 내장 Hook이며 우리는 또 다른 내장 Hook들을 여기에서 확인할 수 있다. 또한 우리는 기존 Hook을 결합해 우리만의 Hooks을 만들수 있다.

Hooks은 다른 Hooks 또는 컴포넌트의 상단에서만 호출 할 수 있기 때문에 다른 기능보다 더 제한적이다. 만약에 너가 조건문이나 반복문에서 useState를 사용하고 싶다면, 새 컴포넌트를 추출하고 그 컴포넌트에서 사용하면 된다.

Sharing data between components

공식 문서 참고

요약

• 리액트 앱은 컴포넌트로 만들어짐
• 주로 JSX 마크업 구문을 사용함
• CSS는 기존에 사용하던 방법을 사용하면 됨
• 데이터를 표시하고 싶다면 {}를 이용하자
• 조건문은 if문 삼항연산자 등 기존에 사용했던 방식을 사용하면 됨
• 반복문도 위와 같음
• 이벤트 응답을 원할땐 컴포넌트에 이벤트 핸들러 함수를 선언하자
• useState()를 사용하면 현재의 상태를 알수 있고 업데이트가 가능함
• Hook은 내장되어 있기도 하고 직접 만들어 사용할 수 있음
• 컴포넌트간 데이터를 공유하고 싶을땐 부모 컴포넌트에서 자식 컴포넌트에 state를 전달하자