[한 입 크기로 잘라 먹는 리액트] 리액트(React) 01

2025.01.31 작성

OS : Window
개발환경 : VScode
개발언어 : JavaScript
프레임워크 : React

---

React

UI 개발을 위한 자바스크립트 라이브러리

<--> jQuery( HTML 문서 조작, 이벤트 처리, 애니메이션, AJAX 요청 등을 쉽게 구현할 수 있도록 도와주는 자바스크립트 라이브러리)

왜 사용할까?

• 컴포넌트(부품) 기반
• 부품 조립
• 재사용성

node.js - vscode 설치

test 폴더 생성

npm create-react-app test

prop --> 매개변수
state --> 지역변수

Form.js

import { useState } from 'react';

export default () => {
    const [name, setName] = useState('');
    const [gender, setGender] = useState('');
    const [birth, setBirth] = useState('');
    const [bio, setBio] = useState('');
    const onChangeName = (e) => {
        setName(e.target.value);
    };
    const onChangeGender = (e) => {
        setGender(e.target.value);
    };
    const onChangeBirth = (e) => {
        setBirth(e.target.value);
    };
    const onChangeBio = (e) => {
        setBio(e.target.value);
    };
    const onSubmit = () => {
        console.log(name, gender, birth, bio);
    };
    return (
        <>
            <div>
                <input
                    value={name}
                    onChange={onChangeName}
                    placeholder="이름"
                />
            </div>
            <div>
                <select value={gender} onChange={onChangeGender}>
                    <option key={1}></option>
                    <option key={2}>남성</option>
                    <option key={3}>여성</option>
                </select>
            </div>
            <div>
                <input type="date" value={birth} onChange={onChangeBirth} />
            </div>
            <div>
                <textarea value={bio} onChange={onChangeBio} />
            </div>
            <button onClick={onSubmit}>전송</button>
        </>
    );
};

---

React

[ 왜 많이 사용할까? ]
1) 컴포넌트 기반 아키텍처
: UI를 재사용 가능한 컴포넌트로 분리하기 때문에 속도 및 유지보수성이 향상되는 효과가 있음

2) 빠른 렌더링
: Virtual DOM을 사용해 최소한의 업데이트만 수행하기에 빠른 렌더링을 제공함

3) 풍부한 생태계
: 다양한 라이브러리와 도구를 통해 확장성 높은 개발 가능함

[ 기존 방식과의 차이점 ]
1) 페이지 전환마다 서버 요청 <> SPA(Single Page Application)로 클라이언트에서 렌더링

2) 동적 컨텐츠 제한적 <> 동적인 UI 업데이트 가능

3) 재사용성 부족 <> 컴포넌트 기반으로 UI 재사용 용이

SpringBoot

[ 특징 ]
1. 쉽고 빠른 설정이 가능하다.
: 복잡한 XML 설정 없이 간단한 애노테이션으로 설정 가능.

2. 임베디드 서버
   : Tomcat 등 임베디드 서버 내장으로 배포 단순화.

3. 대규모 애플리케이션 지원
   : Restful API 설계와 마이크로서비스 아키텍처에 적합.

SpringFramework와 SpringBoot의 차이점

1) 복잡한 XML 설정 필요 <> 애노테이션 기반 간단한 설정 제공

2) 외부 서버 필요 <> 임베디드 서버 내장 (Tomcat 등)

3) 설정과 구성에 많은 시간 소요 <> 기본값 제공으로 설정 시간 단축

4) 대규모 프로젝트에 적합 <> 신속한 개발과 배포에 최적화

React와 SpringBoot를 활용한 시스템 아키텍처

1. 프론트엔드 (React)

• UI 컴포넌트 렌더링 및 사용자 인터페이스 제공.
• Axios, Fetch API 등을 사용해 백엔드와 통신.
• 상태 관리: Redux, Context API 등.

2. 백엔드 (Spring Boot)

• RESTful API 설계로 클라이언트와 데이터 통신.
• 데이터베이스와 연동 (JPA, Hibernate).
• 인증 및 권한 관리 (Spring Security).

3. 데이터베이스

• 관계형 데이터베이스 (MySQL, PostgreSQL 등) 또는 NoSQL (MongoDB) 사용.

4. 시스템 통신 흐름
   클라이언트(React) → REST API 요청 → 백엔드(Spring Boot) → 데이터베이스 처리 → 클라이언트로 응답.

CS

• 컴퓨터 구조
• 운영체제
• 네트워크
• 데이터베이스
• 자료구조
• 프로그래밍

Axios, Fetch API, Redux, Context API란?