24/01/21 TIL(17주차 화요일) - react

리액트(React)는 웹 사이트나 웹 애플리케이션을 만들 때 사용하는 JavaScript 라이브러리입니다. 리액트는 사용자 인터페이스(UI)를 쉽게 만들고, 관리할 수 있게 도와줍니다.

위 코드는 리액트를 사용하여 웹 페이지에 텍스트와 제목을 표시하는 예시입니다. 그럼 하나씩 설명해볼게요!

1. 리액트 컴포넌트(React Component)

리액트에서 웹 페이지는 **컴포넌트(Component)**라는 작은 조각들로 이루어집니다. 컴포넌트는 HTML을 작성하는 템플릿 같은 역할을 합니다. 예를 들어, 위 코드에서 App은 하나의 컴포넌트입니다.

2. import (컴포넌트 가져오기)

리액트에서는 다른 파일에 있는 기능을 사용하려면 import 키워드를 사용해야 합니다. 예를 들어:

import { MantineProvider, Flex, Text, Title } from '@mantine/core';

이 코드는 @mantine/core라는 외부 라이브러리에서 **MantineProvider, Flex, Text, Title**이라는 컴포넌트를 가져오는 코드입니다. 이 컴포넌트들은 웹 페이지를 꾸미는 데 유용합니다.

3. MantineProvider (전역 설정)

MantineProvider는 Mantine 라이브러리의 기본 스타일이나 설정을 전체 페이지에 적용할 수 있게 해주는 컴포넌트입니다. 예를 들어, 글씨의 색이나 크기 같은 스타일을 일괄적으로 적용할 수 있습니다.

4. Flex (배치 방법 설정)

Flex는 자식 컴포넌트들을 배치할 때 사용하는 컴포넌트입니다. 이 코드는 Flex dir="column"이라고 설정되어 있는데, dir="column"은 자식 컴포넌트들이 세로로 정렬되도록 만든다는 뜻입니다. 기본적으로는 가로로 정렬되는데, 이 코드는 세로로 쌓이게 만듭니다.

5. Text (텍스트 표시)

Text는 화면에 텍스트를 표시할 때 사용하는 컴포넌트입니다. 위 코드에서는 Text 안에 "This is my example"이라는 문구가 들어가 있습니다. 이 부분은 화면에 보이는 글씨가 될 것입니다.

6. Title (제목 표시)

Title은 제목을 표시하는 컴포넌트입니다. 예를 들어, 페이지의 제목을 크고 굵게 표시할 때 사용됩니다. order={1}은 제목의 크기를 지정하는데, 1은 가장 큰 제목을 의미합니다.

코드 수정 내용

원래 코드에서는 Title을 가져오지 않았기 때문에 오류가 나고, Flex와 Text가 제대로 닫히지 않아서 문제가 있었습니다. 그래서 올바르게 고친 코드는 다음과 같습니다:

import logo from './logo.svg';
import './App.css';
import { MantineProvider, Flex, Text, Title } from '@mantine/core';  // Title도 추가해야 함

function App() {
  return (
    <MantineProvider>
      {/* dir='column' -> 위에서 아래로 정렬 */}
      <Flex dir="column">
        {/* Text -> 일반 글씨 */}
        <Text>This is my example</Text>
        {/* Title 추가 예시 */}
        <Title order={1}>This is a title</Title> {/* Title 컴포넌트도 예시로 추가 */}
      </Flex>
    </MantineProvider>
  );
}

export default App;

중요한 부분:

• import: 다른 파일이나 라이브러리에서 컴포넌트를 가져오는 명령어입니다.
• MantineProvider: Mantine 라이브러리의 스타일과 설정을 적용하는 컴포넌트입니다.
• Flex: 자식 컴포넌트들이 세로로 정렬되도록 해주는 컴포넌트입니다.
• Text: 화면에 텍스트를 표시하는 컴포넌트입니다.
• Title: 제목을 표시하는 컴포넌트입니다.

리액트 기본 개념 정리

• 컴포넌트(Component): 리액트 앱에서 화면을 만드는 작은 단위입니다. 컴포넌트는 HTML처럼 보이지만, 동적이고 재사용 가능한 코드 조각입니다.
• JSX: 리액트에서 HTML을 JavaScript처럼 사용하도록 도와주는 문법입니다. <Text>This is my example</Text> 같은 코드는 JSX입니다.
• 상태(State): 리액트에서는 데이터를 상태(state)로 관리합니다. 상태가 변경되면 리액트는 자동으로 화면을 업데이트합니다.
• props: 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 방법입니다.

리액트는 이렇게 작은 컴포넌트들을 조합하여 더 큰 웹 애플리케이션을 만드는 데 아주 유용한 도구입니다!