React에서 간단한 카운터 앱을 구축하는 방법

React는 가장 인기 있는 프런트 엔드 JavaScript 라이브러리 중 하나입니다. 많은 회사에서 React를 사용하여 사용자 인터페이스를 개발하고 있으며 개발자들 사이에서 폭넓은 인기를 얻고 있습니다.

이 기본 카운터 앱과 같이 React로 간단한 프로그램을 쉽게 빌드할 수 있습니다. 간단한 튜토리얼로 시작하면 React의 기본적이지만 중요한 개념을 이해하는 데 도움이 됩니다.

카운터 앱의 기능

이 프로젝트에서는 다음과 같은 기능을 갖춘 카운터 애플리케이션을 개발할 것입니다.

1. 증가 카운트 버튼 : 카운트를 1 증가시킵니다.
2. 카운트 감소 버튼 : 카운트를 1씩 감소시킵니다.
3. 재설정 버튼 : 카운트를 0으로 설정합니다.

React의 기본 개념

계속 진행하기 전에 이 프로젝트에서 사용할 React의 기본 개념 중 일부를 이해해야 합니다.

1. 컴포넌트 : 컴포넌트는 React 애플리케이션의 핵심 빌딩 블록입니다. 여기에는 독립적이고 재사용 가능한 코드가 포함되어 있습니다. 구성 요소를 사용하여 사용자 인터페이스를 별도의 부분으로 분할할 수 있습니다. 그런 다음 해당 부품을 재사용하고 독립적으로 작업할 수 있습니다.
2. 상태 : React에서는 객체를 사용하여 구성 요소의 상태를 나타내는 데이터를 저장할 수 있습니다. 이를 통해 구성 요소는 자체 데이터를 관리하고 업데이트할 수 있습니다. 구성 요소의 상태는 렌더링 및 동작 방식을 결정합니다.
3. Functional Components : React의 Functional component는 단순히 props를 인수로 받아들이고 React 요소(JSX)를 반환하는 JavaScript 함수입니다.
4. Props : “properties”의 줄임말인 props를 사용하여 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있습니다. Props는 React의 필수적인 부분 중 하나이며 props를 사용하여 React에서 여러 작업을 수행할 수 있습니다.
5. Hooks : React Hooks는 기능적 구성 요소 내부의 수명 주기 메서드와 같은 상태 및 기타 React 기능을 관리할 수 있는 내장 함수입니다. 또한 간결하고 명확한 코드를 작성하는 데 도움이 될 수 있습니다. useState() 후크 로 상태를 관리하는 방법을 곧 알게 될 것 입니다.

1단계: 프로젝트 설정

터미널을 열고 다음 명령을 실행하여 시작하십시오.

npx create-react-app react-counter-app

이렇게 하면 프로젝트 빌드를 시작할 준비가 된 새로운 반응 앱이 생성됩니다. 여러 파일과 폴더가 있는 파일 시스템 구조를 생성합니다.

터미널에서 다음 명령을 실행하여 개발 서버를 시작합니다.

npm start

이 명령은 브라우저에서 http://localhost:3000을 가리키는 새 탭을 열어야 합니다. 프로젝트에 대한 모든 변경 사항은 여기에서 자동으로 업데이트됩니다.

2단계: 카운터 애플리케이션의 스켈레톤 생성

src/App.js 파일을 열고 거기에 있는 모든 기본 코드를 삭제합니다. 이제 다음 코드를 사용하여 애플리케이션의 골격을 만듭니다.

import React, { useState } from "react";


function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 // To add later
  };
  let decrementCount = () => {
 // To add later
  };
  let resetCount = () => {
  // To add later
  }

export default App;

첫 번째 문 은 반응 모듈 에서 useState 후크를 가져옵니다. 이를 사용하여 카운트 상태를 생성하고 0으로 초기화합니다. setCount 함수 를 사용하여 카운트 값을 변경할 수 있습니다 .

나중에 incrementCount , decrementCount 및 resetCount 함수를 사용 하여 카운터 값을 증가, 감소 및 재설정합니다.

마크업에서 count 변수 주위에 중괄호 { }가 사용된 것을 볼 수 있습니다. 이렇게 하면 기본적으로 JSX 파서가 해당 중괄호 안의 콘텐츠를 JavaScript로 처리해야 함을 알 수 있습니다.

3단계: 카운터 애플리케이션에 기능 추가

카운터 응용 프로그램의 기능을 구현하려면 세 개의 버튼(카운트 감소 버튼, 카운트 증가 버튼 및 재설정 버튼)을 생성해야 합니다. 버튼 div 안에 다음 코드를 추가합니다 .

<Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

이 버튼을 클릭하면 decrementCount , incrementCount 및 resetCount 기능이 실행됩니다. 부모 App 구성 요소에서 자식 Button 구성 요소로 제목 및 작업 소품을 전달하고 있다는 점에 유의하십시오 .

다음 코드를 사용하여 App.js 파일 에서 이러한 함수를 업데이트 합니다.

let incrementCount = () => {
  setCount(count + 1);
};


let decrementCount = () => {
  setCount(count - 1);
};

let resetCount = () => {
  setCount(0);
}

setCount 함수는 카운트 상태를 업데이트 합니다 .

아직 Button 구성 요소를 만들지 않았습니다. src 디렉터리에 새 구성 요소 폴더를 만든 다음 Button.js 라는 새 파일을 만듭니다 . 모든 구성 요소를 같은 폴더에 보관하는 것이 좋습니다.

components/Button.js 파일 에 다음 코드를 추가 합니다.

import React from "react";


function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}

export default Button;

Button 구성 요소 는 소품을 통해 데이터를 받습니다. 그런 다음 함수는 이러한 소품을 별도의 변수로 설정하여 반환하는 마크업을 채우는 데 사용합니다.

코드는 이 구성 요소를 세 번 재사용하여 증가, 감소 및 재설정 버튼을 만듭니다.

마지막으로 다음 코드를 사용하여 App.js 페이지 상단에 있는 Button 구성 요소를 가져옵니다 .

import Button from "./components/Botton";

App.js 파일 에서 최종 코드는 다음과 같습니다.

import React, { useState } from "react";
import Button from "./components/Button";


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

export default App;

Best React Practices 따르기

다양한 방법으로 React 코드를 작성할 수 있지만 가능한 한 깔끔하게 구조화하는 것이 중요합니다. 이렇게 하면 쉽게 유지 관리할 수 있고 응용 프로그램의 전반적인 성능을 향상하는 데 도움이 될 수 있습니다.

반복적인 코드 피하기, 각 React 구성 요소에 대한 테스트 작성, 소품에 대한 객체 구조 분해 사용, 명명 규칙 준수와 같이 React 커뮤니티에서 권장하는 몇 가지 React 사례를 따를 수 있습니다.