프론트엔드 프레임워크 – React 시작하기

byCode Keeper •


React는 현재 가장 인기 있는 프론트엔드 프레임워크 중 하나입니다. 이 포스팅에서는 React의 기본 개념과 사용법을 소개하고, 간단한 예제를 통해 React를 시작하는 방법을 자세히 설명하겠습니다.


React란?


React는 Facebook에서 개발한 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. React의 주요 특징은 컴포넌트 기반 아키텍처와 상태 관리입니다. React를 사용하면 복잡한 사용자 인터페이스를 간단하고 효율적으로 구축할 수 있습니다.


React의 주요 개념


컴포넌트


React의 가장 중요한 개념은 컴포넌트입니다. 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 블록입니다. 각 컴포넌트는 HTML, CSS, JavaScript를 포함할 수 있으며, 다른 컴포넌트와 결합하여 복잡한 UI를 만들 수 있습니다.


JSX


JSX는 JavaScript XML의 약자로, JavaScript 코드 내에서 HTML과 유사한 구문을 사용할 수 있게 해줍니다. JSX를 사용하면 HTML 요소를 작성하듯이 React 컴포넌트를 작성할 수 있습니다.


상태와 속성


  • 상태(state): 컴포넌트 내부에서 관리되는 동적인 데이터입니다. 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.
  • 속성(props): 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. 속성은 읽기 전용입니다.

React 설치 및 설정


React를 시작하려면 Node.js와 npm(Node Package Manager)이 필요합니다. Node.js는 공식 웹사이트에서 다운로드할 수 있습니다.


새로운 React 앱 만들기


create-react-app 도구를 사용하여 새로운 React 프로젝트를 쉽게 만들 수 있습니다. 터미널에서 다음 명령어를 실행하여 create-react-app을 설치합니다.


npx create-react-app my-react-app

프로젝트 디렉토리로 이동한 후, 개발 서버를 시작합니다.


cd my-react-app
npm start

브라우저에서 http://localhost:3000을 열면 React 앱이 실행 중인 것을 볼 수 있습니다.


React 기본 사용법


첫 번째 컴포넌트 만들기


React 앱을 만들었다면, 이제 첫 번째 컴포넌트를 작성해보겠습니다. src 폴더에 Hello.js 파일을 만들고, 다음 코드를 작성합니다.


import React from 'react';

function Hello() {
    return (
        <div>
            <h1>안녕하세요, React!</h1>
            <p>React의 세계에 오신 것을 환영합니다.</p>
        </div>
    );
}

export default Hello;

이제 src/App.js 파일을 열고, 방금 만든 Hello 컴포넌트를 사용해봅시다.


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

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

export default App;

JSX 사용하기


JSX는 React 컴포넌트를 작성할 때 사용하는 특별한 구문입니다. JSX를 사용하면 HTML을 작성하듯이 컴포넌트를 정의할 수 있습니다.


const element = <h1>안녕하세요, JSX!</h1>;

속성(props) 사용하기


속성(props)은 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다.


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

function Hello(props) {
    return (
        <div>
            <h1>안녕하세요, {props.name}!</h1>
            <p>React의 세계에 오신 것을 환영합니다.</p>
        </div>
    );
}

export default Hello;


// App.js
import React from 'react';
import Hello from './Hello';

function App() {
    return (
        <div>
            <Hello name="홍길동" />
        </div>
    );
}

export default App;

상태(state) 사용하기


상태(state)는 컴포넌트 내부에서 관리되는 동적인 데이터입니다. 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리할 수 있습니다.


import React, { useState } from 'react';

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

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>증가</button>
        </div>
    );
}

export default Counter;


// App.js
import React from 'react';
import Hello from './Hello';
import Counter from './Counter';

function App() {
    return (
        <div>
            <Hello name="홍길동" />
            <Counter />
        </div>
    );
}

export default App;

이벤트 처리


React에서는 이벤트를 처리하기 위해 JSX 구문 내에서 이벤트 핸들러를 지정할 수 있습니다.


import React from 'react';

function ClickButton() {
    const handleClick = () => {
        alert('버튼이 클릭되었습니다!');
    };

    return (
        <button onClick={handleClick}>클릭하세요</button>
    );
}

export default ClickButton;


// App.js
import React from 'react';
import Hello from './Hello';
import Counter from './Counter';
import ClickButton from './ClickButton';

function App() {
    return (
        <div>
            <Hello name="홍길동" />
            <Counter />
            <ClickButton />
        </div>
    );
}

export default App;

React 개발 도구


React Developer Tools


React Developer Tools는 브라우저 확장 프로그램으로, React 컴포넌트의 상태와 속성을 검사하고 디버깅할 수 있게 해줍니다. Chrome 웹 스토어에서 설치할 수 있습니다.


CodeSandbox


CodeSandbox는 온라인에서 React 코드를 작성하고 실행할 수 있는 웹 기반 개발 환경입니다. CodeSandbox 웹사이트에서 사용해볼 수 있습니다.


React 프로젝트 구조


일반적인 React 프로젝트 구조는 다음과 같습니다:


my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── Hello.js
│   │   ├── Counter.js
│   │   └── ClickButton.js
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── ...

  • public/: 정적 파일들이 위치하는 폴더입니다. index.html 파일이 포함됩니다.
  • src/: 소스 코드가 위치하는 폴더입니다. 컴포넌트와 주요 애플리케이션 파일들이 포함됩니다.
  • components/: 컴포넌트를 모아놓은 폴더입니다.

React의 장점


  • 컴포넌트 재사용성: 컴포넌트 기반 아키텍처를 통해 UI의 일부분을 재사용할 수 있습니다.
  • 빠른 렌더링: Virtual DOM을 사용하여 실제 DOM을 조작하기 전에 최소한의 변경 사항만을 적용하여 빠르게 렌더링할 수 있습니다.
  • 큰 생태계: React는 커뮤니티가 크고, 많은 라이브러리와 도구들이 존재하여 다양한 기능을 쉽게 추가할 수 있습니다.

결론


React는 현대 웹 개발에서 중요한 프레임워크 중 하나입니다. 이 포스팅에서는 React의 기본 개념과 사용법을 소개하고, 간단한 예제를 통해 React를 시작하는 방법을 자세히 설명하였습니다. React를 배우면 복잡한 사용자 인터페이스를 효율적으로 구축할 수 있습니다.


이 포스팅이 React를 이해하는 데 도움이 되길 바랍니다. 질문이나 추가 정보가 필요하시면 언제든지 댓글로 남겨주세요.

Tags:
다음 이전