React 공식 문서 스터디 - Describing the UI

Junho Yun·2023년 4월 3일
0

링크 및 목차

https://react.dev/learn/describing-the-ui

목차

  • How to write your first React component

  • When and how to create multi-component files

  • How to add markup to JavaScript with JSX

  • How to use curly braces with JSX to access JavaScript functionality from your components

  • How to configure components with props

  • How to conditionally render components

  • How to render multiple components at a time

  • How to avoid confusing bugs by keeping components pure

Your First Component

리액트에서 컴포넌트란? : 리액트의 핵심 컨셉 중 하나로 재사용이 가능한 UI 요소 입니다. 하나의 컴포넌트는 자바스크립트 함수(혹은 클래스)이기 때문에 각 컴포넌트마다 다른 동작을 할 수 있습니다. 이처럼 리액트는 컴포넌트의 구성으로 하나의 페이지를 만드는 방법이라고 생각하면 될 것 같습니다.

You will learn

  • 컴포넌트란 무엇인가
  • 리액트에서 컴포넌트의 역할
  • 컴포넌트를 작성하는 방법

Components: UI building blocks

React에서 컴포넌트는 사용자 인터페이스(UI)를 위한 재사용 가능한 빌딩 블록입니다. UI의 일부를 나타내는 코드 블록(JSX)을 반환하는 JavaScript 함수 또는 클래스입니다. 구성 요소를 중첩하고 결합하여 복잡한 UI 요소를 만들 수 있습니다. 이는 React 애플리케이션의 빌딩 블록이며 애플리케이션의 여러 부분에서 재사용할 수 있습니다. 구성 요소는 데이터(props)를 수신할 수 있으며 자체 내부 상태를 가질 수도 있습니다.
요약하면 구성 요소는 React에서 UI를 구축하기 위한 모듈식 및 재사용 가능한 접근 방식을 허용합니다.

그럼 컴포넌트를 사용할 때와 사용하지 않을 때를 비교해보겠습니다. 

 <!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

import React from 'react';

function ListItem(props) {
  return <li>{props.text}</li>;
}

function List(props) {
  const items = props.items.map((item, index) =>
    <ListItem key={index} text={item} />
  );
  return <ul>{items}</ul>;
}

function App() {
  const items = ["Item 1", "Item 2", "Item 3"];
  return <List items={items} />;
}

export default App;

비교했을 때, 컴포넌트로 구현한 것이 더 복잡하다고 생각할 수 있습니다.
하지만 위의 예시는 하나의 컴포넌트 형태기 때문에, 위의 컴포넌트를 통해 다른 웹 페이지를 구성할 때는 컴포넌트로 구현한 코드를 사용하는 것이 더욱 유리하다는 것을 알 수 있습니다. 또한 JS로 표현을 할 수 있고 Props라는 것을 통해 데이터를 동적으로 바꿀 수 있기 때문에 활용도가 높습니다.

Defining a component

React에서 구성 요소는 JavaScript 함수 또는 클래스를 사용하여 정의됩니다.

기능 구성 요소를 정의하기 위해 JSX 코드를 반환하는 함수를 만들 수 있습니다. 다음은 인사말 메시지를 표시하는 간단한 기능 구성 요소의 예입니다.

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

클래스 구성 요소를 정의하려면 React.Component를 확장하는 클래스를 만들고 JSX 코드를 반환하는 render() 메서드를 정의할 수 있습니다. 다음은 항목 목록을 표시하는 클래스 구성 요소의 예입니다.

import React from 'react';

class ItemList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

export default ItemList;
  • Step 1: Export the component
  • Step 2: Define the function
  • Step 3: Add markup

Using a component

React 애플리케이션에서 구성 요소를 사용하려면 먼저 구성 요소를 사용하려는 파일로 가져온 다음 JSX 코드 내에서 구성 요소를 렌더링해야 합니다.

다음은 React 애플리케이션에서 구성 요소를 사용하는 방법의 예입니다.

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>Welcome to my app!</h1>
      <MyComponent />
    </div>
  );
}

이 예제에서는 "MyComponent"라는 구성 요소를 가져온 다음 앱 구성 요소의 JSX 코드 내에서 렌더링했습니다.

App 구성 요소가 렌더링되면 MyComponent 구성 요소도 렌더링되며 애플리케이션에서 MyComponent 구성 요소의 출력을 볼 수 있습니다.

구성 요소를 사용할 때 데이터 또는 소품을 구성 요소에 전달할 수도 있으며, 이는 구성 요소의 동작 또는 출력을 사용자 지정하는 데 사용할 수 있습니다.

Recap

요약
이제 막 React를 처음 사용해 보셨습니다! 몇 가지 핵심 사항을 요약해 보겠습니다.

  • React를 사용하면 앱의 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있습니다.
  • React 앱에서 모든 UI는 컴포넌트입니다.
  • React 컴포넌트는 다음 몇 가지를 제외하고는 일반적인 자바스크립트 함수입니다:
    1. 컴포넌트의 이름은 항상 대문자로 시작합니다.
    2. JSX 마크업을 반환합니다.

import 및 export | Importing and Exporting Components

목차

학습 내용

  • 루트 컴포넌트란 무엇인지
  • 컴포넌트를 import하고 export하는 방법
  • default 및 이름 있는 import / export 를 사용해야 하는 경우
  • 하나의 파일에서 여러 컴포넌트를 import / export 하는 방법
  • 컴포넌트를 여러 파일로 분할하는 방법

root component

React에서 루트 구성 요소는 애플리케이션의 진입점 역할을 하는 최상위 구성 요소입니다. 렌더링되는 첫 번째 구성 요소이며 다른 모든 구성 요소는 루트 구성 요소의 자식 또는 자손으로 렌더링됩니다.

React에서 루트 구성 요소를 정의하려면 새 파일을 만들고 ReactDOM.render() 메서드를 사용하여 구성 요소를 정의할 수 있습니다. 이 메서드는 루트 구성 요소를 DOM으로 렌더링하는 데 사용됩니다.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

이 예제에서는 루트 구성 요소의 자식이 될 앱 구성 요소뿐만 아니라 React 및 ReactDOM을 가져옵니다. 그런 다음 ReactDOM.render() 메서드를 호출하고 App 구성 요소를 React.StrictMode 구성 요소의 자식으로 전달합니다. 마지막으로 애플리케이션이 렌더링될 루트 요소가 ID가 'root'인 요소임을 지정합니다.

import export

React에서 컴포넌트는 각각 import 및 export 문을 사용하여 가져오고 내보낼 수 있습니다.

파일에서 구성 요소를 내보내려면 구성 요소 정의 앞에 export 키워드를 사용할 수 있습니다. 예를 들어:

// ComponentA.js

import React from 'react';

function ComponentA() {
  return <h1>Hello, I am Component A!</h1>;
}

export default ComponentA;

이 예에서는 ComponentA 함수를 정의하고 export default 문을 사용하여 내보냅니다. 즉, 다른 모듈에서 이 파일을 가져올 때 ComponentA 함수가 기본 내보내기가 됩니다.

파일에서 구성 요소를 가져오려면 'import' 문 뒤에 구성 요소가 포함된 파일의 경로를 사용할 수 있습니다. 예를 들어:

// App.js

import React from 'react';
import ComponentA from './ComponentA';

function App() {
  return (
    <div>
      <ComponentA />
    </div>
  );
}

export default App;

이 예에서는 import 문을 사용하여 ComponentA.js 파일에서 ComponentA를 가져옵니다. 그런 다음 App 함수 내에서 ComponentA를 사용할 수 있습니다.

'export default' 문을 사용하여 구성 요소를 내보내는 경우 모든 이름을 사용하여 가져올 수 있다는 점에 유의해야 합니다. 그러나 export 문을 사용하여 구성 요소를 내보내는 경우 정확히 동일한 이름을 사용하여 가져와야 합니다. 예를 들어:

// ComponentB.js

import React from 'react';

export function ComponentB() {
  return <h1>Hello, I am Component B!</h1>;
}

// App.js

import React from 'react';
import { ComponentB } from './ComponentB';

function App() {
  return (
    <div>
      <ComponentB />
    </div>
  );
}

export default App;

컴포넌트를 여러 파일로 분할하는 방법

React에서는 더 나은 구성과 더 쉬운 유지 관리를 위해 구성 요소를 여러 파일로 분할할 수 있습니다. 이는 ES6 모듈을 사용하여 달성할 수 있습니다.

다음은 구성 요소를 여러 파일로 분할하는 방법의 예입니다.

기본 구성 요소에 대한 파일을 생성하고 MainComponent.js라고 이름을 지정하고 평소와 같이 구성 요소를 정의합니다.

import React from 'react';
import Header from './Header';
import Body from './Body';
import Footer from './Footer';

function MainComponent() {
  return (
    <div>
      <Header />
      <Body />
      <Footer />
    </div>
  );
}

export default MainComponent;

구성 요소의 각 부분(이 경우에는 Header.js, Body.js 및 Footer.js)에 대해 별도의 파일을 만듭니다.

// Header.js
import React from 'react';

function Header() {
  return (
    <header>
      <h1>Header</h1>
    </header>
  );
}

export default Header;

// Body.js
import React from 'react';

function Body() {
  return (
    <div>
      <h2>Body</h2>
      <p>Some content here...</p>
    </div>
  );
}

export default Body;

// Footer.js
import React from 'react';

function Footer() {
  return (
    <footer>
      <p>Footer content here...</p>
    </footer>
  );
}

export default Footer;

마지막으로 컴포넌트의 각 부분을 MainComponent.js 파일로 가져와 평소처럼 사용합니다.

구성 요소를 여러 파일로 분할하면 코드를 보다 모듈화하고 유지 관리하기 쉽게 만들 수 있습니다. 또한 필요한 경우 다른 구성 요소에서 각 부품을 사용할 수 있으므로 구성 요소의 재사용성이 향상됩니다.

요약

이 페이지에서 배우게 된 것들입니다:

  • Root 컴포넌트란 무엇인지
  • 컴포넌트를 import 하거나 export 하는 방법
  • 언제, 어떻게 default 및 named import, default 및 named export를 사용하는지
  • 한 파일에서 여러 컴포넌트를 export 하는 방법
profile
Junho Yun
의미 없는 코드는 없다.
이전 포스트

JS - 정렬 알고리즘

다음 포스트

React 공식 문서 스터디 : 1-7, 1-8

1개의 댓글

comment-user-thumbnail
hyoloui
2023년 4월 3일

React에서 일반적으로 import export 를 사용하지만 추가로 말씀 드리자면,
ES6 모듈로 웹 브라우저와 Node.js에서 사용할 수 있는 JavaScript 모듈 표준입니다. ES6 모듈은 export와 import 구문을 사용하여 모듈을 내보내고 가져옵니다. ES6 모듈을 사용하려면 웹 브라우저에서는 type="module"을 script 태그에 추가해야 합니다. Node.js에서는 파일 확장자를 .mjs로 설정하고 --experimental-modules 플래그를 사용해야 합니다. 기본 Node 환경(.js 파일)에서는 사용이 제한됩니다.

답글 달기