Quick Start

Quick Start

You will learn

• How to create and nest components
• How to add markup and styles
• How to display data
• How to render conditions and lists
• How to respond to events and update the screen
• How to share data between components

 

배울것

• 컴포넌트를 만들고 중첩하는 방법
• 마크업과 스타일을 추가하는 방법
• 데이터를 보여주는 방법
• 조건과 리스트를 렌더하는 방법
• 이벤트에 응답하고 화면을 업데이트 하는 방법
• 컴포넌트들 사이에 데이터를 공유하는 방법

 

 

Creating and nesting components (컴포넌트 만들고 중첩하기)

React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

 

React 앱들은 컴포넌트에 의해 만들어진다. 컴포넌트는 자체 로직과 모양을 가지고 있는 UI의 조각이다. 컴포넌트는 버튼만큼 작을 수도 있고, 전체 페이지만큼 클 수도 있다.

 

 

React components are JavaScript functions that return markup:

 

React 컴포넌트들은 마크업을 반환하는 JS 함수들이다:

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

 

 

Now that you’ve declared MyButton, you can nest it into another component:

 

이제 MyButton을 선언해줬으므로, 또다른 컴포넌트 안에 중첩할 수 있다:

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

 

 

Notice that <MyButton /> starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.

 

<MyButton />이 대문자로 시작하는것에 유의해야한다. 그것이 React 컴포넌트임을 나타내는 방법이다. React 컴포넌트의 이름들은 반드시 항상 대문자로 시작해야 하고, 반면에 HTML 태그는 반드시 소문자로 시작해야 한다.

 

 

Have a look at the result (결과):

 

 

 

The export default keywords specify the main component in the file. If you’re not familiar with some piece of JavaScript syntax, MDN and javascript.info have great references.

 

export default 키워드는 파일의 주요 컴포넌트를 지정한다. 만약 JavaScript 문법 몇몇이 익숙하지 않다면, MDN과 javascript.info 가 좋은 레퍼런스가 될 것이다.

Export and Import

 

 

Writing markup with JSX (JSX로 마크업하기)

The markup syntax you’ve seen above is called JSX. It is optional, but most React projects use JSX for its convenience. All of the tools we recommend for local development support JSX out of the box.

 

위에서 계속 봐왔던 마크업 문법을 JSX 라고 한다. 선택 사항이지만, 대부분의 React 프로젝트들은 편의성을 위해 JSX를 사용한다. 로컬 개발을 위해 추천하는 모든 도구들은 JSX를 제공한다.

Installation – React

 

 

JSX is stricter than HTML. You have to close tags like <br />. Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent, like a <div>...</div> or an empty <>...</> wrapper:

 

JSX는 HTML보다 더 엄격하다. 닫는 태그를 <br />과 같이 써야한다. 컴포넌트 또한 여러개의 JSX 태그들을 반환할 수 없다. <div> ... </div>나 빈 wrapper인 <> ... </> 와 같은 공통 부모로 감싸야 한다.

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

 

If you have a lot of HTML to port to JSX, you can use an online converter.

 

만약 JSX로 포팅할 HTML이 많을 경우, 온라인 변환기를 사용할 수 있다.

HTML to JSX

 

 

Adding styles (스타일 더하기)

In React, you specify a CSS class with className. It works the same way as the HTML class attribute:

 

React 에선, CSS 클래스를 className으로 지정할 수 있다. HTML의 class 속성과 똑같다:

class - HTML: HyperText Markup Language | MDN

<img className="avatar" />

 

 

Then you write the CSS rules for it in a separate CSS file:

 

그리고 분리된 CSS 파일 안에서 CSS 규칙을 이용해 작성하면 된다:

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

 

 

React does not prescribe how you add CSS files. In the simplest case, you’ll add a <link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.

 

React는 CSS 파일들을 추가하는 방법을 규정하지 않는다. 가장 간단한 방법으로, HTML에 <link> 태그를 통해 추가할 수 있다. 만약 빌드 도구나 프레임워크를 이용한다면, 프로젝트에 CSS 파일을 추가하는 방법을 배우기 위해 해당 공식문서를 참조하면 된다.

<link>: The External Resource Link element - HTML: HyperText Markup Language | MDN

 

 

Displaying data (데이터 표시)

JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display user.name:

 

JSX는 JavaScript에 마크업을 넣도록 해준다. 중괄호는 코드로부터 변수를 포함하고 사용자에게 보여줄 수 있도록 JavaScript로 "탈출" 할 수 있도록 해준다. 예를 들어, 다음은 user.name을 보여준다:

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

 

 

You can also “escape into JavaScript” from JSX attributes, but you have to use curly braces instead of quotes. For example, className="avatar" passes the "avatar" string as the CSS class, but src={user.imageUrl} reads the JavaScript user.imageUrl variable value, and then passes that value as the src attribute:

 

또한 JSX 속성으로부터 "JavaScript로 탈출" 할 수 있지만, 따옴표 대신에 중괄호를 사용해야 한다. 예를 들어, className="avatar"는 "avatar"라는 CSS 클래스를 문자열로 전달하지만, src={user.imageUrl}은 JavaScript의 user.imageUrl 변수의 값을 읽고, src 속성에 그 값을 전달한다:

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

 

You can put more complex expressions inside the JSX curly braces too, for example, string concatenation:

 

JSX 중괄호 안에 더 복잡한 표현도 넣을 수 있다. 예를 들어, 문자열 연결이 있다:

Basic operators, maths

 

 

 

In the above example, style={{}} is not a special syntax, but a regular {} object inside the style={ } JSX curly braces. You can use the style attribute when your styles depend on JavaScript variables.

 

위의 예시에서, style={{}}은 특별한 문법이 아니라, syle={ } JSX 중괄호 내부에 있는 일반적인 {} 객체이다. 스타일들이 JavaScript 변수들에 의존할 때 스타일 속성을 사용할 수 있다.

 

 

Conditional rendering (조건부 렌더링)

In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as you use when writing regular JavaScript code. For example, you can use an if statement to conditionally include JSX:

 

React 에선, 조건들을 작성하기 위한 특별한 문법이 없다. 대신에, 일반적인 JavaScript 코드를 작성할 때 사용하는 것과 똑같은 테크닉을 사용할 수 있다. 예를 들어, 조건부로 JSX를 포함하는 if 명령을 사용할 수 있다:

if...else - JavaScript | MDN

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

 

 

If you prefer more compact code, you can use the conditional ? operator. Unlike if, it works inside JSX:

 

만약 더 단축된 코드를 선호한다면, 삼항연산자를 사용할 수 있다. if와 달리, JSX 안에서 작동한다.

Conditional (ternary) operator - JavaScript | MDN

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

 

 

When you don’t need the else branch, you can also use a shorter logical && syntax:

 

else 구문이 필요하지 않다면, 논리적 && 문법을 사용할 수 있다:

Logical AND (&&) - JavaScript | MDN

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

 

 

All of these approaches also work for conditionally specifying attributes. If you’re unfamiliar with some of this JavaScript syntax, you can start by always using if...else.

 

이 모든 접근방식들은 조건부로 속성들을 지정하는데 사용하기도 한다. 만약 이 JavaScript 문법 몇몇에 익숙하지 않다면, 항상 if...else 문을 사용하는 것으로 시작할 수 있다.

 

 

Rendering lists (리스트 렌더링)

You will rely on JavaScript features like for loop and the array map() function to render lists of components.

 

컴포넌트 리스트들을 렌더하기 위해 for 반복문이나 array의 map() 함수와 같은 JavaScript 기능을 사용해야 한다.

for - JavaScript | MDN

Array.prototype.map() - JavaScript | MDN

 

 

For example, let’s say you have an array of products:

 

예를 들어, 물건들의 배열을 가지고 있다고 해보자:

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

 

 

Inside your component, use the map() function to transform an array of products into an array of <li> items:

 

컴포넌트 안에서, 물건들의 배열을 <li> 요소의 배열로 바꾸기 위해서 map() 함수를 사용한다:

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

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

 

 

Notice how <li> has a key attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items.

 

<li>가 어떻게 key 속성을 가지고 있는지 확인해야 한다. 리스트 안의 각각의 아이템은, 문자열이나 숫자로 이루어진 형제간의 독립적인 식별자를 전달해야 한다. 보통, key는 데이터베이스의 ID같은 데이터로부터 받아온다. React는 만약 나중에 삽입, 삭제, 또는 아이템 재정렬이 일어날 때 key를 사용한다.

 

 

Responding to events (이벤트 응답)

You can respond to events by declaring event handler functions inside your components:

 

컴포넌트 안에 이벤트 핸들러 함수를 작성해서 이벤트에 응답할 수 있다:

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

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

 

 

Notice how onClick={handleClick} has no parentheses at the end! Do not call the event handler function: you only need to pass it down. React will call your event handler when the user clicks the button.

 

onClick={handleClick}이 끝에 괄호가 없다는 점에 주목해야 한다! 이벤트 핸들러 함수를 호출하는 것이 아니다: 단지 밑으로 전달할 필요가 있을 뿐이다. React는 유저가 버튼을 클릭할 때 이벤트 핸들러를 호출한다.

 

 

Updating the screen (화면 업데이트)

Often, you’ll want your component to “remember” some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add state to your component.

 

종종, 컴포넌트가 몇몇 정보를 "기억"하고 보여주길 원할 것이다. 예를 들어, 아마도 버튼이 몇번 클릭됐는지 세고 싶을 것이다. 그러기 위해서는, 컴포넌트에 state를 추가하면 된다.

 

 

First, import useState from React:

 

첫번째로, useState를 React로부터 import 한다:

useState – React

import { useState } from 'react';

 

 

Now you can declare a state variable inside your component:

 

이제 컴포넌트 안에 state 변수를 선언할 수 있다:

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

 

 

You’ll get two things from useState: the current state (count), and the function that lets you update it (setCount). You can give them any names, but the convention is to write [something, setSomething].

 

useState 로부터 두가지를 얻을 수 있다: 현재 state (count)와, state를 업데이트 하게 해주는 (setCount)이다. 아무 이름이나 붙여도 되지만, 관례는 [something, setSomething]과 같이 쓴다.

 

 

The first time the button is displayed, count will be 0 because you passed 0 to useState(). When you want to change state, call setCount() and pass the new value to it. Clicking this button will increment the counter:

 

처음에 button이 화면에 보여지면, useState()에 0을 전달해주었기 때문에 count는 0일것이다. state를 바꾸고 싶을 때, setCount()를 호출하고 새로운 값을 넘겨주면 된다. 이 버튼을 클릭하면 counter가 증가할 것이다:

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

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

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

 

React will call your component function again. This time, count will be 1. Then it will be 2. And so on.

 

React는 컴포넌트 함수를 다시 호출할 것이다. 이번엔, count는 1이 될 것이다. 그리고 이와 같은 방법으로 계속 증가할 것이다.

 

 

If you render the same component multiple times, each will get its own state. Click each button separately:

 

만약 같은 컴포넌트를 여러번 렌더링하면, 각각의 렌더는 고유한 state를 가진다. 각각의 버튼을 따로 클릭해보자:

import { useState } from 'react'; export default function MyApp() { return (

Counters that update separately

); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( ); }

 

 

Notice how each button “remembers” its own count state and doesn’t affect other buttons.

 

각각의 버튼이 자신의 count state를 "기억"하고 다른 버튼들에 영향을 끼치지 않는 방법에 주목해야 한다.

 

 

Using Hooks (Hook 사용)

Functions starting with use are called Hooks. useState is a built-in Hook provided by React. You can find other built-in Hooks in the API reference. You can also write your own Hooks by combining the existing ones.

 

Hooks라 불리는 함수와 함께 시작해보자. useState는 React에 의해 제공되는 Hook에 내장되어있다. API 문서에서 다른 내장 Hooks 들을 찾아볼 수 있다. 또한 존재하는 것들을 조합해서 본인만의 Hooks를 작성할 수 있다.

Built-in React Hooks – React

 

 

Sharing data between components (컴포넌트들 사이에 데이터 공유)

In the previous example, each MyButton had its own independent count, and when each button was clicked, only the count for the button clicked changed:

 

이전의 예제에서, 각각의 MyButton은 본인만의 독립적인 count를 가졌고, 버튼을 클릭하면 클릭한 버튼에 대한 count만 변경되었다.

 

 

However, often you’ll need components to share data and always update together.

 

하지만, 종종 항상 같이 업데이트되는 데이터를 공유할 필요가 있다.

 

 

To make both MyButton components display the same count and update together, you need to move the state from the individual buttons “upwards” to the closest component containing all of them.

 

모든 MyButton 컴포넌트들이 같은 count를 보여주고 함께 업데이트 하기 위해, state를 모든 MyButton 컴포넌트들을 포함하고 있는 가장 가까운 "위쪽(부모)" 컴포넌트로 옮겨야 한다.

 

예시:

처음에, MyApp의 count state는 0이고, 자식들에게 이 state를 내려준다.

그리고 클릭하면, MyApp의 count가 1로 업데이트 되고, 자식들에게 또다시 내려준다.

 

 

Now when you click either button, the count in MyApp will change, which will change both of the counts in MyButton. Here’s how you can express this in code.

 

이제 각각의 버튼을 클릭했을 때, MyApp에 있는 count가 바뀌고, MyButton에 있는 count들 또한 바뀔것이다. 코드로 다음과 같이 표현할 수 있다.

 

 

First, move the state up from MyButton into MyApp:

 

첫번째로, MyButton에 있는 state를 MyApp으로 올린다:

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

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

  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  // ... we're moving code from here ...
}

 

 

Then, pass the state down from MyApp to each MyButton, together with the shared click handler. You can pass information to MyButton using the JSX curly braces, just like you previously did with built-in tags like <img>:

 

그리고나서, MyApp에 있는 state를 공유하는 클릭 핸들러와 함께 각각의 MyButton으로 내려준다. 이전에 <img> 같은 기본 내장 태그를 사용한 것 처럼 JSX 중괄호를 이용해서 MyButton으로 정보를 내려줄 수 있다.

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

 

 

The information you pass down like this is called props. Now the MyApp component contains the count state and the handleClick event handler, and passes both of them down as props to each of the buttons.

 

이렇게 아래로 내려주는 정보들을 props 라고 부른다. 이제 MyApp 컴포넌트는 count state와 handleClick 이벤트 핸들러를 포함하고, 각각의 버튼으로 props를 통해 밑으로 내려준다.

 

 

Finally, change MyButton to read the props you have passed from its parent component:

 

마지막으로, 부모 컴포넌트로부터 전달받은 props를 읽어 MyButton이 바뀐다.

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

 

 

When you click the button, the onClick handler fires. Each button’s onClick prop was set to the handleClick function inside MyApp, so the code inside of it runs. That code calls setCount(count + 1), incrementing the count state variable. The new count value is passed as a prop to each button, so they all show the new value. This is called “lifting state up”. By moving state up, you’ve shared it between components.

 

버튼을 클릭할 때, onClick 핸들러가 실행된다. 각각의 버튼에 있는 onClick prop은 MyApp 안에 있는 handleClick 함수를 실행하고, 그 안에 있는 코드가 실행된다. 그 코드는 setCount(count + 1)를 호출하고, count state 변수를 증가시킨다. 새로운 count 값이 각각의 버튼으로 prop을 통해 전달되고, 새로운 값을 보여준다. 이것을 "상태 올리기" 라고 한다. state를 위로 옮김으로써, 컴포넌트들 사이에 공유할 수 있다.