React의 핵심 개념, 설치와 실행까지 (간단!)

 

React란 무엇인가?

 

React는 Facebook에서 개발한 UI 라이브러리입니다.

 

React는 가독성 좋은 코드를 작성할 수 있도록 도와주며, 성능을 향상시켜주는 많은 기능을 제공합니다.

 

React의 가장 큰 특징은 가상 DOM(Virtual DOM)을 사용한다는 것입니다.

 

가상 DOM은 실제 DOM과 동일한 구조를 가지지만, 메모리에 저장되며, 변화가 필요한 부분만을 업데이트합니다.

 

이를 통해 React는 빠른 렌더링 속도와 좋은 성능을 보장합니다.

 

 

React의 핵심 개념

 

컴포넌트(Component)

 

React에서는 모든 UI를 컴포넌트로 구성합니다. 컴포넌트는 독립적으로 존재하며, 다른 컴포넌트와 조합하여 사용됩니다.

 

각 컴포넌트는 자체적으로 상태(state)를 가지며, 이 상태는 컴포넌트의 렌더링 결과에 영향을 미칩니다.

 

React에서 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다.

 

 

상태(State)

 

상태는 컴포넌트 내에서 변화하는 값을 말합니다. 상태는 컴포넌트 내에서만 사용되며,

 

다른 컴포넌트에서는 접근할 수 없습니다. 상태는 useState Hook을 사용하여 정의할 수 있습니다.

 

 

속성(Props)

 

속성은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 값입니다. 속성은 컴포넌트 내에서 읽기 전용으로 사용됩니다.

 

 

JSX

 

JSX는 JavaScript XML의 약어로, JavaScript에서 XML 형식의 코드를 작성할 수 있게 해주는 문법입니다.

 

JSX는 React에서 UI를 작성하는 데 매우 중요한 역할을 합니다. JSX를 사용하면 HTML과 유사한 구문으로

 

UI를 작성할 수 있으며, 컴포넌트 내에서 JavaScript 코드를 쉽게 사용할 수 있습니다.

 

 

React의 사용 방법

 

React를 사용하기 위해서는 먼저 Node.js와 npm(Node Package Manager)를 설치해야 합니다.

 

npm을 사용하여 React를 설치할 수 있습니다. 다음은 React 애플리케이션을 만드는 방법입니다.

 

 

1. 'create-react-app' 명령어를 사용하여 React 애플리케이션을 생성합니다.

 

npx create-react-app my-app

 

'npx'는 실행 명령어, `create-react-app`은 React 애플리케이션 생성 명령어, `my-app`은 생성되는 애플리케이션의 제목

 

이라고 생각하시면 됩니다.

 

 

2. 생성된 애플리케이션의 디렉토리로 이동합니다.

cd my-app

 

 

3. 애플리케이션을 실행합니다.

npm start

 

 

4.  http://localhost:3000 이라는 url로 진입되면, React 애플리케이션이 실행된 것입니다.

 

(3000 포트가 사용중이면 다른 포트로 연결될 수 있습니다)

 

 

React 애플리케이션에서는 컴포넌트를 작성하고, 이 컴포넌트들을 렌더링하여 UI를 생성합니다.

 

다음은 간단한 예제 코드입니다.

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

이 예제 코드에서는

 

useState Hook을 사용하여 count 상태를 정의하고,

 

handleClick 함수를 작성하여 버튼 클릭 시 count 값을 증가시킵니다.

 

이후 count 값을 UI에 렌더링합니다.

 

 

정리

 

React는 다양한 라이브러리와 함께 사용될 수 있습니다.

 

예를 들어, React Router는 React에서 라우팅을 구현하는 데 사용되며,

 

Redux는 React에서 상태 관리를 하는 데 사용됩니다.

 

이상으로 React의 핵심 개념과 사용 방법에 대해 알아보았습니다.

 

React는 매우 인기 있는 자바스크립트 라이브러리이며, 다양한 기능과 생산성을 향상시키는 많은 기능을 제공합니다.

 

주니어 개발자라면 React를 공부해보는 것이 좋을 것입니다.