React란?

이 글은 아래 웹 페이지를 번역한 글입니다.

https://www.simplilearn.com/tutorials/reactjs-tutorial/what-is-reactjs#what_is_react

The Best Guide to Know What Is React [Updated]



----

 

오늘날 세상은 모바일과 웹 애플리케이션 없이는 살아갈 수 없습니다.

택시를 예약하는 것부터 음식을 주문하거나 은행 거래하는 것까지, 모든 것이 디지털화 되어 있습니다.

이는 원활한 사용자 경험을 제공하는 효율적인 프레임워크들 덕분입니다.

그런 강력한 프런트엔드 라이브러리 중 하나가 바로 React입니다.

이 글을 통해 React의 기초를 이해하고, 간단한 데모를 통해 React가 어떻게 동작하는지 이해하는 데 도움이 될 것입니다.

 

 

목차

1. React란?

2. 왜 React인가?

3. React의 특징

4. React에서의 컴포넌트

5. React에서의 props

6. React에서의 state

7. props VS. state

 

 

1. React란?

React는 JavaScript 기반의 UI 개발 라이브러리이며, Facebook과 오픈소스 개발자 커뮤니티가 React를 운영하고 있습니다.

React는 언어라기 보단 라이브러리이지만, 웹 개발에서 널리 사용되고 있습니다.

이 라이브러리는 2013년 5월에 처음 등장했고, 현재는 웹 개발에서 가장 일반적으로 사용되는 프런트엔드 라이브러리 중 하나입니다.

 

React는 단순한 UI를 넘어 Flux 및 React Native와 같은 전체 애플리케이션의 설계적 지원를 위한 다양한 확장들을 제공합니다.

 

 

2. 왜 React인가?

오늘날 React의 인기는 다른 모든 프런트엔드 개발 프레임워크의 인기를 능가했습니다.

이유는 다음과 같습니다:

• 동적 애플리케이션 생성이 쉬움: React는 빠르게 복잡해지는 JavaScript와 달리 코딩이 덜 필요하고, 더 많은 기능을 제공하기 때문에 동적 웹 애플리에이션을 좀 더 쉽게 만들 수 있습니다.
• 향상된 성능: React는 Virtual DOM을 사용하므로 웹 애플리케이션을 더 빠르게 만들 수 있습니다. 기존 웹 애플리케이션은 구성 요소가 변경되었을 때 모든 구성 요소를 업데이트했었지만, Virtual DOM은 구성 요소들의 이전 상태를 비교해서 변경된 부분만 실제 DOM에 업데이트 합니다.
• 재사용 가능한 컴포넌트: 컴포넌트는 모든 React 애플리케이션을 구성하는 요소이며, 하나의 애플리케이션은 여러 컴포넌트들로 이루어져 있습니다. 이러한 컴포넌트들은 각자의 로직과 제어를 가지고, 애플리케이션 전체에서 재사용될 수 있기 때문에 애플리케이션의 개발 시간을 크게 줄일 수 있습니다.
• 단방향 데이터 흐름: React는 단방향 데이터 흐름을 따릅니다. 즉, React 앱을 설계할 때 상위 컴포넌트 안에 하위 컴포넌트를 둡니다. 데이터가 단방향으로 흐르기 때문에, 에러를 디버깅하거나 문제가 어디에서 발생했는지 파악하기 더 쉽게 해줍니다.
• 작은 학습 곡선: React는 대부분 기본적인 HTML과 JavaScript 개념을 결합하기 때문에 배우기가 쉽습니다. 하지만 다른 툴, 프레임워크와 마찬가지로 React의 라이브러리를 제대로 이해하려면 시간이 필요합니다.
• 웹개발과 모바일 앱 개발에 모두 사용할 수 있음: 우린 이미 React가 웹 개발에 사용되는 걸 알고 있습니다. 하지만 그것만 할 수 있지는 않습니다. React Native라고 불리는 프레임웍이 있습니다. 이는 리액트 자체에서 파생된 것으로 매우 인기가 있고 아름다운 모바일 애플리케이션을 만드는 데 사용됩니다. 따라서 현실적으로 React는 웹과 모바일 앱 둘 다 만들 수 있다고 할 수 있습니다.
• 간편한 디버깅을 위한 전용 도구: Facebook은 리액트 애플리케이션을 디버깅할 수 있는 크롬 확장을 출시했습니다. 이 확장은 React 웹 애플리케이션을 좀 더 빠르고 쉽게 디버깅 할 수 있도록 해줍니다.

위 이유들로 React 라이브러리의 인기와 수많은 회사에서 채택된 이유를 알 수 있습니다.

이번엔 React의 특징에 대해 알아보겠습니다.

 

 

3. React의 특징

React는 프런트엔드 앱 개발을 위해 가장 널리 채택된 라이브러리를 만드는 몇 가지 뛰어난 특징을 제공합니다.

여기 그 두드러진 특징들 목록이 있습니다.

 

JSX

JSX는 JavaScript 구문 확장입니다. JSX는 UI가 어떻게 보여야 하는지를 설명하기 위해 사용되는 용어입니다.

JSX를 활용하여 HTML 구조를 JavaScript 코드와 동일한 파일로 코딩할 수 있습니다.

const name = 'Simplilearn';
const greet = <h1>Hello, {name}</h1>;

 

위 코드는 JSX가 React에서 어떻게 구현되는지를 보여줍니다.

이건 문자열도 아니고 HTML도 아닙니다. 대신 JavaScript 코드에 HTML이 내장되어 있습니다.

 

기본적으로 React에서 컴포넌트를 만들려면, React.createElement 함수를 사용해서 만들어 합니다.

아래 HTML을 React.createElement를 사용해 render를 해보겠습니다.

<div>
  <h1>hello</h1>
  <ul>
    <li>hi</li>
  </ul>
</div>

// React.createElement(type, props, ...children)

ReactDOM.render(
  React.createElement(
      'div',
      null,
      React.createElement(
        'h1',
        null,
        'hello',
      ),
      React.createElement(
        'ul',
         null,
         React.createElement(
           'li',
           null,
           'hi'
         )
      )
  ),
  document.querySelector('#root')
)

 

 

JSX로 동일한 코드를 만들면 아래와 같습니다.

ReactDOM.render(
  <div>
    <h1>hello</h1>
    <ul>
      <li>hi</li>
    </ul>
  </div>,
  document.querySelector('#root')
);

 

 

가독성이 훨씬 뛰어나고, 태그 문법 검사도 엄격히 실행되기 때문에 React를 사용할 땐 필수 요소라고 할 수 있습니다.

 

 

Virtual Document Object Model(DOM)

가상 DOM은 실제 DOM의 경량 버전입니다. 실제 DOM의 조작은 가상 DOM의 조작보다 많이 느립니다. 어떤 객체가 변경됐을 때, 가상 DOM은 모든 객체를 변경하지 않고 실제 DOM에서 변경된 객체만 업데이트합니다.

 

• Document Object Model(DOM)이 뭔가요?

Fig: DOM of a Webpage

DOM은 XML이나 HTML 문서를 트리구조로 처리합니다. 각 노드는 문서의 일부를 나타내는 객체입니다.

 

• 가상 DOM과 React DOM은 서로 어떻게 상호작용 하나요?

React 애플리케이션에서 객체의 상태가 변경되면 가상 DOM이 업데이트됩니다. 다음으로 이전 상태를 비교한 다음 실제 DOM에 변경된 부분만 업데이트합니다. 이는 웹 응용 프로그램에서 하나의 객체만 변경되더라도 각 객체를 업데이트해야 하는 다른 프런트엔드 기술들과 비교했을 때 특히 더 빨리 동작하게 합니다.

 

아키텍처

Model View Controller(MVC) 아키텍처에서 React는 앱의 모양과 느낌을 담당하는 'View'입니다.

 

MVC는 애플리케이션 계층을 Model, View, Controller로 나누는 설계 패턴입니다. Model은 모든 데이터와 관련된 로직을 담당하고, View는 애플리케이션의 UI 로직에 사용되며, Controller는 모델과 뷰 사이의 인터페이스입니다.

 

확장들

React는 단순한 UI 프레임워크 그 이상입니다. React는 전체 애플리케이션 아키텍처를 커버할 수 있는 많은 확장들을 포함하고 있습니다. React는 모바일 앱을 만들 수 있게 도와주고, Server Side Rendering(SSR)을 제공합니다. Flux와 Redux 등의 확장들로 React를 확장시킬 수 있습니다.

 

데이터 바인딩

React는 단방향 데이터 바인딩으로 동작하기 때문에, 모든 동작들은 모듈식으로 신속하게 유지됩니다. 또한, 단방향 데이터 흐름은 React 애플리케이션을 개발할 때 상위 구성 요소에 하위 구성 요소를 중첩시키는 것이 일반적이라는 걸 의미합니다.

디버깅

대규모의 개발자 커뮤니티가 존재하기 때문에, React 애플리케이션은 테스트하기가 쉽습니다. Facebook은 심플하고 빠르게 디버깅할 수 있는 브라우저 확장을 제공합니다.

예를 들어, 이 확장으로 크롬 개발자 도구 옵션에서 React 탭을 추가할 수 있습니다. 이 탭은 React의 컴포넌트들을 직접적으로 검사하기 쉽게 해줍니다.

 

이제 React의 핵심적 특징을 알게 되었으니 React의 주요 기능에 대해 알아봅시다.

 

 

4. React에서의 컴포넌트

컴포넌트는 UI의 일부를 나타내는, React 애플리케이션을 구성하는 요소입니다.

React는 UI를 수많은 컴포넌트들로 나누고, 디버깅하기 쉽게 만들고, 각 컴포넌트들은 자신만의 속성과 기능을 가지도록 합니다.

 

아래는 컴포넌트의 몇 가지 특징입니다.

 

• 재사용성: 애플리케이션의 한 영역에서 사용되는 컴포넌트는 다른 영역에서도 재사용할 수 있습니다. 이는 개발 속도를 향상시키는 데 도움이 됩니다.
• 중첩 컴포넌트: 컴포넌트는 다른 여러 컴포넌트들을 포함할 수 있습니다.
• 렌더링 방법: 컴포넌트는 최소한의 형태로 컴포넌트가 DOM에 렌더링하는 방법을 정의해야 합니다.
• Property 전달: 컴포넌트는 props를 전달받을 수 있습니다. 이는 상위 컴포넌트로부터 전달받은 값입니다.

 

좀 더 쉽게 이해하기 위해 데모를 보겠습니다.

 

함수 컴포넌트와 클래스 컴포넌트가 있다고 가정합시다.

 

/// FunctionalComp.js ///

import React from 'react';

function FunctionalComp() {
    return <p>This is a Functional component</p>;
}

export default FunctionalComp;


/// ClassComp.js ///

import React from 'react';

export class ClassComp extends React.Componenet {
    render() {
        return <p>This is the Class Component</p>;
    }
}

export default ClassComp;

클래스 컴포넌트는 화면에 렌더링하는 render 메서드를 가집니다. Export default는 파일에서 하나의 객체(함수, 변수, 클래스)를 추출하는 데 사용됩니다. 파일마다 오직 하나만 default로 export가 허용됩니다.

 

아래의 경우, 이 컴포넌트들은 메인 컴포넌트인 App.js에 import되었습니다.

 

import React from 'react';
import FunctionalComp from './Componenets/FunctionalComp';
import ClassComp from './Componenets/ClassComp';

function App() {
    return (
        <div>
            <h1>Hello! WElcome to Simplilearn</h1>
            <FunctionalComp />
            <ClassComp />
        </div>
    );
}

export default App;

 

실행한 결과는 아래와 같습니다.

 

한 파일에서 여러 객체를 export 할 수도 있습니다.

 

이제 React의 컴포넌트에 대해 알게 됐으니, React Props에 대해 알아보겠습니다.

 

 

5. React에서의 props

properties의 약어인 props를 사용하면 컴포넌트에 데이터를 전달할 수 있습니다. 이러한 props는 컴포넌트를 더욱 동적으로 만드는 데 도움이 됩니다. props는 읽기전용 데이터이며, 변경할 수 없습니다.

 

아래 코드처럼, 클래스 컴포넌트가 있다고 가정합시다.

 

/// Classprops.js ///

import Reaact, { Componenet } from 'react';

class Classprops extends Componenet {
    render() {
        return (
            <div>
                <h1>
                    Hello {this.props.name} from {this.props.place}! Welcome to Simplilearn
                </h1>
            </div>
        );
    }
}

export default Classprops;

 

위에선 'name', 'place'라는 이름의 property를 사용합니다. 이 property는 상위 컴포넌트에서 하위 컴포넌트로 전달된 값입니다.

 

메인 컴포넌트인 App.js는 다음과 같습니다.

 

/// App.js ///

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

class App extends React.Component {
    render() {
        return (
            <div>
                <Classprops name='Learner 1' place='PlaceX'/>
                <Classprops name='Learner 2' place='PlaceY'/>
                <Classprops name='Learner 3' place='PlaceZ'/>
            </div>
        );
    }
}

export default App;

 

같은 property에 다른 값을 전달해서 실행한 결과는 아래와 같습니다.

 

이제 props가 어떻게 동작하는지 알았으니, React에서 state가 어떻게 동작하는지 살펴봅시다.

 

 

6. React에서의 state

state는 시간이 지나면서 변경될 수 있는 컴포넌트의 property들을 저장하는 객체입니다.

 

• state는 네트워크에서의 변경이나 유저의 동작으로 변경될 수 있습니다.
• 객체의 state가 변경될 때마다 컴포넌트를 브라우저로 다시 렌더링합니다.
• Object() { [native code] } 함수는 state 객체가 생성되는 곳입니다.
• 여러 property들은 state 객체에 저장될 수 있습니다.
• setState()는 state 객체의 값을 변경하는 데 사용됩니다.
• setState() 함수는 새로운 상태나 이전 상태를 얕게 병합합니다.

 

아래의 State.js 컴포넌트를 봅시다.

 

/// State.js ///

import React, { Componenet } from 'react';

class State extends Componenet {
    constructor(props) {
        super(props);
        this.state = {
            message: 'Subscribe to Simplilearn'
        }
    }
    
    render() {
        return (
            <div className='App'>
                <h3>{this.state.message}</h3>
            </div>
        );
    }
}

export default State;

 

위에서 <h3> 태그는 state 객체의 message 값을 출력하고 있습니다.

 

메인 컴포넌트인 App.js는 아래와 같습니다.

 

import React from 'react';
import './App.css';
import State from './Componenets/State';

class App extends React.Componenet {
    styles = {
        fontStyle: 'bold',
        color: 'teal'
    }
    
    render() {
        return (
            <div className='App'>
                <h1 style={this.styles}>Welcome</h1>
                <State />
            </div>
        );
    }
}

export default App;

 

결과는 아래와 같습니다.

 

setState() 함수

state는 이벤트 핸들러, 서버 응답, prop 변경으로 업데이트될 수 있습니다. 이는 이는 setState 함수를 사용해 동작합니다.

 

this.setState({ quantity: value })

 

setState() 함수는 컴포넌트의 state에 대한 모든 변경점들을 대기열에 넣고, 해당 컴포넌트가 다시 렌더링하고, 그 컴포넌트의 하위 항목들도 state를 업데이트하도록 지시합니다.

 

아래는 구독 버튼을 클릭하는 시나리오의 코드입니다. 버튼을 클릭하면, 화면의 메시지가 변해야 합니다. 이걸 구현하기 위해선 setState() 함수를 사용해야 합니다.

 

import React, { Componenet } from 'react';

class State extends Componenet {
    constructor(props) {
        super(props);
        this.state = {
            message: 'Subscribe to Simplilearn',
            sub: 'Subscribe'
        }
    }
    
    ChangeMessage= () => {
        this.setState({
            message: 'Thank you for Subscribing',
            sub: 'Subscribed'
        });
    }
    
    render() {
        return (
            <div className='App'>
                <h3>{this.state.message}</h3>
                <button onClick={this.ChangeMessage}>{this.state.sub}</button>
            </div>
        );
    }
}

export default State;

 

여러분은 버튼을 위해 'sub'라는 추가적인 state 객체를 만들었습니다. 버튼을 클릭하면 이벤트가 발생하고, 'ChangeMessage' 함수가 실행됩니다. 이 함수는 setState() 함수로 message와 sub의 값을 업데이트하고, 다시 렌더링을 해서 결과를 보여줄 것입니다.

 

버튼을 클릭하면 아래와 같은 결과가 나옵니다.

 

위의 내용은 단순히 props를 사용해서도 만들 수 있지만, state를 사용하면 매우 효율적입니다.

다음 섹션에선 props와 state의 차이점에 대해 알아봅니다.

 

 

7. props VS. state

Props	State
Props는 데이터와 이벤트 핸들러를 하위 컴포넌트로 전달하기 위해 사용됩니다.	화면에 표시되어야 하는 컴포넌트의 데이터는 state에 저장합니다.
Prop는 변경할 수 없습니다.	시간이 지남에 따라 변경될 수 있는 state로 저장됩니다.
함수/클래스 컴포넌트 모두 props를 사용할 수 있습니다.	클래스 컴포넌트만 state를 사용할 수 있습니다.
상위 컴포넌트는 하위 컴포넌트에 대한 props를 설정합니다.	이벤트 핸들러는 일반적으로 state의 업데이트를 담당합니다.

 

 

마치며

위와 같이 React가 무엇이고 왜 사용해야 하는지 등을 알아봤습니다.

 

현재 React는 여러 기업이나 프로젝트에서 많이 사용되는 대표적인 프런트엔드 라이브러리이며, 뛰어난 확장성과 성능, 활용 범위(웹, 모바일),  그리고 JavaScript와 HTML을 사용하기 때문에 친숙하고, 비교적 쉽게 배울수 있는 이점을 가진 라이브러리라고 생각합니다.

 

다음은 React를 설치하고 간단한 웹 애플리케이션을 만들어볼 예정입니다.

 

고맙습니다.