[ReactJS] 1장. React JS는 무엇인가?

 

2013년 5월 29일 지금으로부터 약 12년전 페이스북(Meta) 및 공동체가 개발한 싱글 페이지 애플리케이션인 React가 탄생하게 됩니다. React는 "싱글 페이지 애플리케이션(SPA, Single Page Application)"과 동적 웹 애플리케이션"개발에 사용할 수 있고 컴포넌트 기반 아키텍쳐 와 가상 DOM(Virtual DOM)을 제공합니다.

---

1. React의 주요 특징

• 컴포넌트 기반 아키텍쳐
  
  • React UI를 컴포넌트(Component) 단위로 나누어 개발
  • 각 컴포넌트는 독립적이며 재사용이 가능
• 가상 DOM(Virtual DOM)
  • React는 실제 DOM 대신 가상적인 DOM을 사용해 성능을 최적화
  • 상태가 변경되는 즉시 가상DOM을 먼저 업데이트 후, 변경된 부분만 실제 DOM에 반영
• 선언적 UI(Declarative UI)
  • React는 "어떻해(How)" 보다 "무엇(What?)"을 중시
  • 개발자는 UI가 어떠한 방식으로 구현할 것인지 선언, React가 자동적으로 UI를 업데이트
• 단방향 데이터 흐름(Unidirectional Data Flow)
  
  • 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 전달
  • 이를 통해 데이터 흐름이 명확하고 디버깅이 쉬움
• JSX(JavaScript XML)
  • HTML과 유사한 JSX 문법을 사용해 UI를 정의
  • JSX는 JavaScript의 확장 문법으로, HTML과 Javascript를 결합하는 방식

---

2. React의 장점

• 컴포넌트 재사용성: 컴포넌트 기반 구조로 코드 재사용에 좋음
• 성능: 가상 DOM을 사용한 Fast-Rendering(빠른 렌더링)이 가능
• 커뮤니티: 널리 사용되는 라이브러리와 커뮤니티 자료가 풍부
• 유연성: 다른 라이브러리나 프레임워크와 쉽게 통합
• 개발자 도구: React Developer Tools와 같은 강력한 도구 

---

3.React의 단점

• 긴 로딩 시간 소요: 다른 라이브러리에 비해 로딩시간이 길다는 단점
• 초기 학습 곡선: JSX, 상태 관리, 컴포넌트 생명주기 등 복잡한 이해도 
• 보일러플레이트 코드: 간단한 기능을 구현하기 위한 비교적 많은 코드가 필요
• 라이브러리: 프레임워크가 아니기에, 라우팅, 상태 관리 등 추가적인 라이브러리 설치가 필요하며 그에 따른 코드의 무게 증가 우려

---

4. React의 기본 개념

• 컴포넌트(Component)
  • React 애플리케이션의 기본 구성 단위로 함수형 컴포넌트와 클래스형 컴포넌트로 나뉨

// 함수형 컴포넌트
function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 클래스형 컴포넌트
class Hello extends React.Component {
  render() {
     return <h1>Hello, {this.props.name}</h1>;
   }
}

• Props와 State
  
  • Props: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터(읽기 전용).
  • State: 컴포넌트 내부에 관리되는 데이터(변경 가능)

function Counter() {
   const [count, setCount] = useState(0); // State 선언
   
   return {
     <div>
       <p>Count: {count}</p>
       <button onClick={() => setCount(count + 1)}>증가</button>
     </div>
   }
}

• 이벤트 처리
  
  • React는 카멜 케이스(camelCase)로 이벤트를 처리

function handleClick() {
  alert("Button clicked!");
}

<button onClick={handleClick}>Click Button</button>

• 라이프사이클 메서드(클래스형 컴포넌트)
  
  • 컴포넌트 생명주기(마운트, 업데이트, 언마운트)를 관리

class MyComponent extends React.Component {
   componentDidMount() {
     console.log("Component mounted");
   }
   
   componentWillUnmount() {
     console.log("Component will unmount");
   }
   
   render() {
     return <div>Hello, World</div>
   }
}

• React Hooks(함수형 컴포넌트)
  
  • React 16.8 버전부터 도입된 기능, 함수형 컴포넌트에서 상태와 생명주기를 관리

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

function Counter() {
   const [count, setCount] = useState[0];
   
   useEffect(() => {
      console.log('Component updated');
   }, [count]);
   
   return (
      <div> 
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>증가</button>
      </div>
   );
}

---

5. React의 생태계

React에는 다양한 라이브러리와 도구를 제공합니다.

• 상태 관리: Redux, MobX, Recoil
• 라우터: React Router
• 빌드 도구: Webpack, Babel
• 테스팅: Jest, React Testing Library
• 서버 사이드 렌더링: Nest.js

---

6. React 세팅하기

React 프로젝트를 세팅하기위해 Node.js와 npm이 설치되어 있어야 합니다.

 

• 새 프로젝트 생성하기
  • create-react-app을 사용해 새 프로젝트를 생성합니다.

npx create-react-app my-app
cd my-app
npm start && yarn start

• React 파일 구조
  • src/App.js: React의 메인 컴포넌트 파일
  • src/index.js: 애플리케이션 진입점
  • public/index.html: HTML 템플릿

// App.js 
import "./App.css";

function Profile() {
  return (
    <div className="App">
      <img src="https://i.imgur.com/MK3eW3As.jpg" about="Katherine Johnson" />
    </div>
  );
}

export default function App() {
  return (
    <section>
      <h1>Amazing scientist</h1>
      <div class="profile">
        <Profile />
        <Profile />
        <Profile />
      </div>
    </section>
  );
}

├─node_modules
├─public
├─ src
└─ App.css
└─ App.js
└─ App.test.js
└─ index.css
└─ index.js
└─ logo.svg
└─ reportWebBitals.js
└─ setupTests.js
├─ .gitignore
├─package-lock.json
├─package.json
├─README.md
├─yarn.lock

---

간단 요약

• React는 컴포넌트 기반으로한 UI 라이브러리로, Virtual-DOM(가상 DOM)과 JSX를 사용해 빠르고 효율적인 애플리케이션을 구축
• 함수형 컴포넌트(Function Component)와 Hooks를 통한 간결하고 강력한 코드 작성가능
• React는 현대 웹 개발에 가장 인기 있는 라이브러리로 풍부한 생태계를 지님