React 입문 가이드: 처음부터 사용자 인터페이스 구축하기

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. Facebook에서 개발 및 유지 관리하며, 프론트엔드 개발에서 가장 인기 있는 도구 중 하나가 되었습니다. 이 가이드는 처음부터 React의 기본 개념을 단계별로 이해하고 간단한 사용자 인터페이스를 구축하는 데 도움이 될 것입니다.

React를 선택하는 이유는 무엇입니까?

React는 다음과 같은 장점이 있습니다.

컴포넌트화: React는 사용자 인터페이스를 독립적이고 재사용 가능한 컴포넌트로 분해합니다. 이를 통해 코드를 더 쉽게 유지 관리하고 이해할 수 있습니다.
선언적: React는 선언적 프로그래밍 스타일을 사용합니다. 즉, 표시하려는 내용을 설명하기만 하면 React가 업데이트 및 렌더링을 자동으로 처리합니다.
효율적: React는 가상 DOM과 스마트 diff 알고리즘을 사용하여 사용자 인터페이스를 효율적으로 업데이트하고 불필요한 렌더링을 줄입니다.
광범위한 커뮤니티 지원: React는 광범위한 커뮤니티와 풍부한 생태계를 보유하고 있으며, 개발에 도움이 되는 많은 튜토리얼, 라이브러리 및 도구를 찾을 수 있습니다.
크로스 플랫폼 기능: React Native를 사용하면 React를 사용하여 네이티브 모바일 앱(iOS 및 Android)을 개발할 수 있습니다.

준비 작업

시작하기 전에 컴퓨터에 다음 도구가 설치되어 있는지 확인해야 합니다.

Node.js: Node.js는 React 개발 도구를 실행하는 데 사용되는 JavaScript 런타임 환경입니다. https://nodejs.org/에서 다운로드하여 설치할 수 있습니다.
npm 또는 yarn: npm(Node Package Manager)과 yarn은 React의 종속성을 설치하고 관리하는 데 사용되는 JavaScript 패키지 관리자입니다. 일반적으로 Node.js를 설치할 때 npm이 함께 설치됩니다. yarn은 https://yarnpkg.com/에서 설치할 수 있습니다.

첫 번째 React 앱 만들기

create-react-app을 사용하여 React 프로젝트를 빠르게 만들 것입니다.

npm을 사용하여 생성:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

yarn을 사용하여 생성:

yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

위의 명령을 실행하면 create-react-app이 자동으로 my-first-react-app이라는 디렉토리를 만들고 해당 디렉토리에서 React 프로젝트를 초기화합니다. npm start 또는 yarn start 명령은 개발 서버를 시작하고 브라우저에서 http://localhost:3000에 접속하여 React 앱을 볼 수 있습니다.

디렉토리 구조

create-react-app이 생성한 프로젝트 디렉토리 구조는 다음과 같습니다:

my-first-react-app/
├── node_modules/         # 프로젝트 의존성 라이브러리
├── public/               # 정적 리소스 (예: HTML 파일)
│   ├── index.html        # 애플리케이션의 진입점 HTML 파일
│   └── ...
├── src/                  # React 소스 코드
│   ├── App.css           # App 컴포넌트의 CSS 스타일
│   ├── App.js            # App 컴포넌트
│   ├── App.test.js       # App 컴포넌트의 테스트 파일
│   ├── index.css         # 전역 CSS 스타일
│   ├── index.js          # 애플리케이션의 진입점 JavaScript 파일
│   ├── logo.svg          # React 로고
│   └── ...
├── .gitignore            # Git 무시 파일
├── package.json          # 프로젝트 메타데이터 및 종속성
├── README.md             # 프로젝트 설명 문서
└── yarn.lock             # 종속성 버전 잠금 파일 (yarn 사용 시)

React 컴포넌트 이해하기

React 애플리케이션은 컴포넌트로 구성됩니다. 컴포넌트는 사용자 인터페이스의 특정 부분을 렌더링하는 독립적이고 재사용 가능한 코드 블록입니다.

src/App.js 파일에서 기본 App 컴포넌트를 볼 수 있습니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

코드 설명:

import React from 'react'; React 라이브러리를 가져옵니다.
function App() { ... } App이라는 함수 컴포넌트를 정의합니다.
return ( ... ) 컴포넌트가 렌더링해야 하는 내용을 설명하는 JSX 표현식을 반환합니다.
export default App; 다른 파일에서 사용할 수 있도록 App 컴포넌트를 내보냅니다.

JSX (JavaScript XML)

JSX는 JavaScript 코드에서 HTML과 유사한 코드를 작성할 수 있도록 하는 JavaScript 구문 확장입니다. 위의 예에서 ...은 JSX 표현식입니다. JSX 코드는 Babel에 의해 표준 JavaScript 코드로 변환되어 브라우저가 이해할 수 있도록 합니다.

App 컴포넌트 수정하기

App 컴포넌트를 수정하여 간단한 카운터를 만들어 보겠습니다.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
 setCount(count + 1);
 };

 const decrement = () => {
 setCount(count - 1);
 };

 return (
 <>
 

 # 카운터

 현재 카운트: {count}

 +
 -
 

 );
}

export default App;

수정 설명:

import React, { useState } from 'react'; useState Hook을 가져옵니다. useState는 함수 컴포넌트에서 상태를 추가하는 데 사용되는 React Hook입니다.
const [count, setCount] = useState(0); useState Hook을 사용하여 count라는 상태 변수를 만들고 0으로 초기화합니다. setCount는 count 상태를 업데이트하는 데 사용되는 함수입니다.
const increment = () => { setCount(count + 1); }; count 상태를 1씩 증가시키는 increment라는 함수를 정의합니다.
const decrement = () => { setCount(count - 1); }; count 상태를 1씩 감소시키는 decrement라는 함수를 정의합니다.
현재 카운트: {count} 페이지에 count 상태의 값을 표시합니다. {count}는 JSX 코드에서 JavaScript 변수를 삽입하는 데 사용되는 JSX 표현식입니다.
+ 및 -는 각각 increment 및 decrement 함수에 바인딩된 두 개의 버튼을 만듭니다. onClick은 버튼을 클릭할 때 지정된 함수를 실행하는 데 사용되는 이벤트 핸들러입니다.

src/App.js 파일을 저장하면 브라우저가 자동으로 새로 고쳐지고 간단한 카운터가 표시됩니다. "+" 버튼을 클릭하면 카운트가 증가하고 "-" 버튼을 클릭하면 카운트가 감소합니다.

CSS 스타일 사용

CSS를 사용하여 React 앱을 꾸밀 수 있습니다. create-react-app은 CSS Modules와 일반 CSS 파일을 지원합니다.

CSS Modules 사용:

CSS Modules를 사용하면 각 컴포넌트에 대해 독립적인 CSS 스타일을 만들어 스타일 충돌을 방지할 수 있습니다. 컴포넌트에서 CSS Modules를 사용하려면 .module.css로 끝나는 파일을 만들어야 합니다.

예를 들어 App.module.css라는 파일을 만들고 다음 CSS 스타일을 추가합니다.

.App {
 text-align: center;
}

.App h1 {
 color: blue;
}

.App button {
 padding: 10px 20px;
 font-size: 16px;
 background-color: lightgreen;
 border: none;
 cursor: pointer;
}

그런 다음 src/App.js 파일에서 CSS Modules를 가져옵니다.

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS Modules 가져오기

function App() {
 const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* styles 객체를 사용하여 CSS 클래스 참조 */}
      

# 카운터

      현재 카운트: {count}

      +
      -
    
  );
}

export default App;

일반 CSS 파일 사용:

일반 CSS 파일을 사용하여 전역 스타일을 정의할 수도 있습니다. src/index.css 파일에서 전역 스타일을 정의할 수 있습니다.

예를 들어, 다음 CSS 스타일을 추가합니다: