React 소개

React

Meta(FaceBook)에서 개발한 JavaScript 기반 UI 개발 라이브러리

React는 페이스북에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위한 라이브러리입니다. React는 사용자 인터페이스의 구축과 관리를 도와주는 선언적이고 효율적인 방법을 제공합니다. React는 단일 페이지 애플리케이션(SPA) 및 모바일 애플리케이션에서 특히 뛰어난 성능을 보이며, 컴포넌트 기반 아키텍처를 기반으로 하고 있습니다.

React는 2011년에 페이스북에서 처음으로 도입되었고, 2013년에 오픈소스로 공개되었습니다. 그 이후로도 React 커뮤니티는 계속 성장하고 발전하며, 많은 개발자들이 이 라이브러리를 사용하여 현대적이고 효율적인 웹 애플리케이션을 구축하고 있습니다.

React 창시자

React는 페이스북에서 개발되었으며, React를 만든 팀 중 주요한 인물 중 한 명은 Jordan Walke입니다. Jordan Walke는 React를 초기에 개발하고 그 아이디어를 구상한 주요 개발자 중 하나로 알려져 있습니다.

Jordan Walke는 React의 초기 버전을 만들면서 JSX(JavaScript XML) 문법을 도입하고, React의 핵심 개념 중 하나인 가상 DOM(Virtual DOM)을 도입하는 등의 기술적인 결정을 내린 인물 중 하나로 알려져 있습니다.

React 핵심 개념

React 는 가상 DOM(Virtual DOM)을 사용하여 속성(attribute) 또는 상태(state)의 변화에 반응하여 UI를 업데이트하는 구조이다.

Reconciliation (재조정)

가상 DOM 생성
: 상태나 속성이 변경되면 React는 컴포넌트의 새로운 가상 DOM을 생성합니다. 이 가상 DOM은 변경 사항을 반영한 컴포넌트의 트리 구조를 가집니다.

이전 가상 DOM과 비교
: 새로운 가상 DOM은 이전 가상 DOM과 비교됩니다. 이 비교를 통해 변경된 부분이 식별되고, 실제 DOM에 적용해야 할 최소한의 업데이트가 결정됩니다.

실제 DOM 업데이트
: 변경된 부분이 식별되면 React는 이를 바탕으로 실제 DOM을 업데이트합니다. 이때 최소한의 조작만이 이루어지므로 성능이 향상됩니다.

1. 가상 DOM 생성

2. 이전 가상 DOM과 비교

3. 실제 DOM 업데이트

생각해보기

상태 변경을 감지해서 모든 구조를 다시 생성하는 것이 빠를까? 변경된 부분만 업데이트하는 것이 빠를까?

Reconciliation (재조정)을 통해 React는 효율적으로 UI를 업데이트하고 성능을 최적화할 수 있습니다. 이는 React의 성능 특징 중 하나로, 화면 전체를 다시 그리는 것이 아니라 변경된 부분만을 감지하여 업데이트하므로써 빠른 화면 갱신을 가능하게 합니다.

주요 개념

컴포넌트 기반
: React 애플리케이션은 작고 재사용 가능한 컴포넌트로 구성됩니다. 각 컴포넌트는 자체적으로 상태(state)를 가질 수 있으며, 이러한 컴포넌트를 조합하여 전체 애플리케이션을 구축합니다.

가상 DOM (Virtual DOM)
: React는 가상 DOM을 사용하여 브라우저에 렌더링되기 전에 가상으로 모든 변경 사항을 처리합니다. 이를 통해 효율적으로 화면을 갱신하고 성능을 최적화할 수 있습니다.

JSX (JavaScript XML)
: React에서는 JSX라는 문법을 사용하여 JavaScript 코드 안에서 XML과 유사한 문법으로 UI를 작성할 수 있습니다. JSX는 간결하고 가독성이 높은 코드를 작성할 수 있도록 도와줍니다.

단방향 데이터 바인딩
: React는 단방향 데이터 바인딩을 지원하여 데이터의 흐름이 단일 방향으로 유지됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있으나, 그 반대는 자동으로 이루어지지 않습니다.

상태 관리
: React 애플리케이션에서는 컴포넌트의 상태를 통해 동적인 데이터를 다룰 수 있습니다. 상태는 컴포넌트 내에서 변경 가능하며, 상태의 변화에 따라 자동으로 화면이 갱신됩니다.

라우팅
: React는 라우터를 통해 다양한 페이지 간의 전환이나 SPA에서의 라우팅을 쉽게 처리할 수 있습니다. React Router는 React 애플리케이션에서 라우팅을 구현하는 데 사용되는 널리 사용되는 라이브러리 중 하나입니다.

주요 학습 요소

JSX

컴포넌트

Props

State

라이프사이클(생명주기)

Hooks

이벤트 핸들링

조건부 렌더링

JSX (JavaScript XML)

•

JSX는 JavaScript의 확장 문법으로, JavaScript 코드 안에서 XML 형식의 마크업을 작성할 수 있게 합니다.

•

React에서 컴포넌트의 UI를 정의하는 데 주로 사용되며, 가독성이 높고 코드 작성이 편리하도록 도와줍니다.

const element = <h1>Hello, World!</h1>;
JavaScript
복사

컴포넌트

•

컴포넌트는 UI를 독립적이고 재사용 가능한 부분으로 나누는 개념입니다.

•

React 애플리케이션은 여러 컴포넌트들이 조합되어 전체 UI를 형성합니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
JavaScript
복사

Props (속성)

•

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용되는 매개변수입니다.

•

컴포넌트는 props를 통해 부모로부터 전달받은 데이터를 사용할 수 있습니다.

<Welcome name="John" />
JavaScript
복사

State (상태)

•

State는 컴포넌트가 자체적으로 유지하고 관리하는 데이터입니다.

•

상태가 변경되면 React는 컴포넌트를 리렌더링하고 변경된 상태를 반영합니다.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  // ...
}
JavaScript
복사

라이프사이클(생명주기)

•

컴포넌트가 생성, 갱신, 제거되는 과정을 라이프사이클이라고 합니다.

•

주요 단계에 따라 라이프사이클 메서드를 사용하여 작업을 수행할 수 있습니다.

class ExampleComponent extends React.Component {
  componentDidMount() {
    // 컴포넌트가 마운트된 후 실행되는 코드
  }
  // ...
}
JavaScript
복사

Hooks

•

Hooks는 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수입니다.

•

useState, useEffect 등이 널리 사용되며, 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 합니다.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 컴포넌트가 마운트 또는 갱신된 후 실행되는 코드
  }, [count]);

  // ...
}
JavaScript
복사

이벤트 핸들링

•

React에서는 이벤트 핸들링이 일반적인 HTML과 유사하지만, camelCase 표기법을 사용합니다.

•

핸들러 함수를 만들고 JSX에서 이벤트에 연결할 수 있습니다.

function handleClick() {
  alert('Button Clicked!');
}

<button onClick={handleClick}>Click me</button>
JavaScript
복사

조건부 렌더링

•

JSX에서 조건에 따라 다른 컴포넌트나 엘리먼트를 렌더링할 수 있습니다.

•

삼항 연산자나 && 연산자 등을 사용하여 조건부 렌더링을 구현할 수 있습니다.

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}
JavaScript
복사

React & React Native

두 기술 모두 Facebook에서 개발되었으며, React에서 사용되는 기술과 개념을 공유합니다. React Native는 React를 기반으로 하여 JavaScript 및 React를 사용하여 네이티브 모바일 애플리케이션을 만들 수 있도록 하는 것이 주요 목표입니다. 이러한 유사성으로 인해 React로 작성된 웹 애플리케이션과 React Native로 작성된 모바일 애플리케이션 간의 코드 재사용이 일부 가능합니다.

React

웹 애플리케이션 개발 라이브러리

•

웹 애플리케이션 개발을 위한 라이브러리: React는 주로 웹 애플리케이션을 개발하기 위한 라이브러리로 사용됩니다.

•

컴포넌트 기반 아키텍처: React는 컴포넌트 기반 아키텍처를 기반으로 한다. 이는 UI를 재사용 가능하고 독립적인 조각으로 나누어 개발하는데 도움을 준다.

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

A JavaScript library for building user interfaces

https://ko.legacy.reactjs.org/

React로 개발한 웹사이트 : Facebook, Instagram

React Native

모바일 애플리케이션 개발 라이브러리

•

모바일 애플리케이션 개발을 위한 프레임워크: React Native는 React의 확장으로, 주로 iOS 및 Android 모바일 애플리케이션을 개발하기 위한 프레임워크로 사용됩니다.

•

네이티브 모바일 앱 개발: React Native는 JavaScript와 React를 사용하여 네이티브(원래의 플랫폼에서 실행되는) 모바일 애플리케이션을 만들 수 있도록 지원합니다.

•

컴포넌트 기반 아키텍처의 확장: React Native도 React처럼 컴포넌트 기반 아키텍처를 사용하며, React에서 사용하는 것과 유사한 개념과 API를 제공합니다.

React Native · Learn once, write anywhere

A framework for building native apps using React

https://reactnative.dev/

React Native 로 개발한 앱 : Facebook, Instagram

React 사용 전 vs 사용 후

React 사용 하지 않는 HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Alert Example</title>
    <style>
        /* 스타일 추가 */
        .styled-alert {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

    <button id="myButton">Click me</button>

    <script>
        // 버튼 요소를 가져오기
        var myButton = document.getElementById("myButton");

        // 버튼에 클릭 이벤트 리스너 추가
        myButton.addEventListener("click", function() {
            // 스타일링된 alert를 표시하기 위한 div 요소 생성
            var styledAlert = document.createElement("div");
            styledAlert.className = "styled-alert";
            styledAlert.textContent = "버튼이 클릭되었습니다!";

            // body에 추가
            document.body.appendChild(styledAlert);

            // 2초 후에 alert를 삭제
            setTimeout(function() {
                document.body.removeChild(styledAlert);
            }, 2000);
        });
    </script>

</body>
</html>
JavaScript
복사

React 로 개발한 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Styled Alert</title>
    <!-- React 및 ReactDOM CDN 추가 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Babel 사용을 위한 CDN 추가 -->
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        /* 스타일 추가 */
        .styled-alert {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

    <div id="root"></div>

    <script type="text/babel">
        // React 컴포넌트 정의
        const { useState } = React;

        function App() {
          // showAlert 상태와 해당 상태를 변경하는 함수를 useState 훅을 통해 생성
          const [showAlert, setShowAlert] = useState(false);

          // handleClick 함수 정의: 버튼 클릭 시 showAlert 상태를 토글하고, 2초 후에 다시 false로 변경하여 alert를 제거
          const handleClick = () => {
            // 버튼 클릭 시 showAlert 상태를 토글
            setShowAlert(true);

            // 2초 후에 showAlert 상태를 다시 false로 변경하여 alert를 제거
            setTimeout(() => {
              setShowAlert(false);
            }, 2000);
          };

          // JSX를 사용하여 UI를 반환
          return (
            <div>
              {/* 버튼 엘리먼트: 클릭 시 handleClick 함수 실행 */}
              <button onClick={handleClick}>Click me</button>

              {/* showAlert가 true일 때만 렌더링되는 조건부 렌더링 */}
              {showAlert && (
                <div className="styled-alert">
                  버튼이 클릭되었습니다!
                </div>
              )}
            </div>
          );
        }

        // React 컴포넌트를 root 요소에 렌더링
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>

</body>
</html>
JavaScript
복사

미리 알아두기

React를 프로젝트에 포함하는 방식

CDN 방식

Node.js와 npm 방식

CDN 방식

React 및 ReactDOM CDN 추가

Babel을 사용하는 경우

React 코드 작성

React 및 ReactDOM CDN 추가

<!-- React와 ReactDOM CDN 추가 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
HTML
복사

Babel을 사용하는 경우

<!-- Babel을 사용하는 경우 Babel CDN 추가 -->
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
HTML
복사

React 코드 작성

<script type="text/babel">
  // React 코드 작성
  const element = <h1>Hello, World!</h1>;
  ReactDOM.render(element, document.getElementById('root'));
</script>
HTML
복사

바벨()이란? 바벨(Babel)은 자바스크립트 코드를 변환하는 도구로, 주로 최신 ECMAScript 표준에 따라 작성된 코드를 이전 버전의 자바스크립트로 변환하는 데 사용됩니다.

Node.js와 npm 방식

프로젝트 초기화

React 및 ReactDOM 설치

React 코드 작성

프로젝트 초기화

npx create-react-app my-react-app
cd my-react-app
Shell
복사

React 및 ReactDOM 설치

npm install react react-dom
Shell
복사

React 코드 작성

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));
JavaScript
복사