[React] 기본 개념 공부

React 기본 개념들에 대해 정리합니다.

 

공부하는 목적은 플랫폼 엔지니어링 오픈소스인 https://backstage.io/ 에서 Custom 플러그인을 개발하기 위해 React 지식이 필요한 것 같아 공부하려 해봅니다.

 

 

---

React는 UI를 만들기 위한 Javascript 라이브러리임. Factbook에서 개발했으며 빠르고 효율적인 UI를 만들기 위한 목적으로 만들어졌음

 

1. Component

- React의 핵심 단위

- UI를 작고 재사용 가능한 단위로 쪼개서 관리

- 함수형 컴포넌트가 많이 사용된다.

 

function Hello(props) {
  return <h1>Hello, {props.name}!</h1>
}

 

2. JSX (JavaScript XML)

- JavaScript 코드 안에서 HTML 처럼 보이는 코드를 작성할 수 있게 해주는 문법

- JSX는 브라우저가 이해할 수 있도록 React.createElement 형태로 변환함

 

const element = <h1>Hello, world!</h1>;

->

const element = React.createElement('h1', null, 'Hello, world!');

 

3. Props

- 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 과정

- 읽기 전용(Immutable)

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

// 사용
<Welcome name="React" />

 

 

4. State (상태)

- 컴포넌트 내부에서 관리되는 데이터

- 사용자의 동작이나 API 응답 등으로 변경 가능

- 변경되면 자동으로 재 렌더링 발생

import { useState } from 'react';

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

  return (
    <div>
      <p>{count}번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

 

5. React Hooks

- 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 API

 

- 주요 Hooks

  - useState

  - useEffect

  - useRef

  - useMemo

  - useCallback

  - useContext

  - useReducer

 

 

6. Virtual DOM

- 실제 DOM 대신 가상의 DOM을 만들어 최소한의 변경만 적용

- 변경이 발생하면 이전 가상 DOM과 비교 -> 필요한 부분만 실제 DOM에 반영

 

---

간단히 사용해보기

 

아직 React 사용 방법을 잘 모르기에 간단히만 사용해본다.

 

React 초기 프로젝트를 만들기 위해서는 npx라는 패키지 실행기(Executor)를 활용할 수 있다.

 

NodeJS와 NPM이 설치되어 있으면 npx도 사용할 수 있다.

 

npx create-react-app my-app을 통해 초기 구성 가능

 

❯ npx create-react-app sample-app2

Creating a new React app in /Users/xxxxxxxx/Documents/git/private/sample-app2.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1322 packages in 41s

...
...

We suggest that you begin by typing:

  cd sample-app2
  npm start

Happy hacking!

 

 

 

 

여기서 핵심 파일은 3가지인 것으로 보인다.

 

- index.html : 최종 HTML 파일이며 <div id="root">를 통해 React가 가상 DOM을 조작할 수 있도록 해줌

 

- index.js : 브라우저에서 React 앱이 시작되는 첫 번째 파일이다.

id=root 요소를 찾아서 그 자리에 React 앱(App)을 렌더링한다.

 

- App.js : React 앱의 메인 컴포넌트 역할을 수행한다.

모든 React 컴포넌트 트리의 최상단이며 여러 하위 컴포넌트들을 포함해서 UI를 구성한다.

페이지를 구성하는 컴포넌트들 (<Header />, <Footer />, <Home />, <LoginForm />) 등을 넣을 수 있다.

 

---

간단히 사용해보기

 

https://ip-ranges.amazonaws.com/ip-ranges.json 로부터 regions 들을 조회한 뒤 웹에 보여주는 것을 React로 간단히 구현해봄

 

 

[1] API Region을 조회하여 regions(배열)로 region 해주는 단순한 함수

const AWS_IP_RANGE_URL = "https://ip-ranges.amazonaws.com/ip-ranges.json"
const regions = [];
const ipRanges = {};

export async function fetchAWSRegionsAndService() {

  if (regions.length > 0) {
    // caching data를 응답해준다.
    return regions;
  }

  try {
    const response = await fetch(AWS_IP_RANGE_URL);
    
    if (!response.ok) {
      throw new Error(`HTTP error when fetching AWS IP range! status: ${response.status}`);
    }

    const data = await response.json();

    // region 추출
    for (let i = 0; i < data["prefixes"].length; i++) {
      let region = data['prefixes'][i]['region'];
      if (!regions.includes(region)) {
        regions.push(region);
        ipRanges[region] = [];
      }
    }

    return regions;

  } catch (err) {
    console.error(`Error fetching AWS IP Range regions and services: ` + err);
  }
}

 

 

[2] 해당 함수를 활용하여 Region을 보여주는 함수형 컴포넌트

import React, { useEffect, useState } from 'react';
import { fetchAWSRegionsAndService } from '../api/aws';

function IpRanges() {
  const [regions, setRegions] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchAWSRegionsAndService()
      .then(data => {{
        setRegions(data);
        // setError(null);
      }})
      .catch(err => {
        setError(err.message || 'Unknown error occurs');
        // setRegions([]);
      })
      .finally(() => {
        setLoading(false);
      })

  }, []);

  if (loading) {
    return <div>Loading ...</div>
  }

  if (error) {
    return <div>Error : {error}</div>
  }

  return (
    <div>
      <h2>AWS Regions</h2>
      <ul>
        {regions.map((region, index) => (
          <li key={index}>region : {region}</li>
        ))}
      </ul>
    </div>
  )
}

export default IpRanges;

 

 

[3] Component를 활용하여 AWS Region을 보여줌

import {React, useState} from 'react';
import IpRanges from './components/ipRanges';

function App() {
const [showIpRanges, setShowIpRanges] = useState(false);

const handleClick = () => {
  setShowIpRanges(true);  // 버튼 클릭 시 컴포넌트 호출
}

  return (
    <div>
      <button onClick={handleClick}>AWS 리전 조회</button>

      {showIpRanges && <IpRanges/>}
    </div>
  )
}

export default App;

 

css는 하나도 안함.

 

버튼 클릭해야 한다.

 

버튼 클릭 시,

 

 

다음 목표 : NextJS, TypeScript 공부