1. 프론트엔드 3대장
- Angular JS
- 구글에서 만든 JavaScript 기반 오픈 소스 프레임워크이다.
- 양방향 데이터 바인딩으로 양방향 웹 애플리케이션에 적합하다.
- 2016년 이후 점유율 하락.
- 사용 예: 유튜브, 페이팔, 구글, 텔레그램 등.
- React JS
- 페이스북에서 2011년에 만든 오픈 소스 JavaScript 라이브러리이다.
- 데이터 변경이 잦고 복잡한 규모가 큰 라이브러리에 적합하다.
- Angular보다 배우기 쉬움.
- 사용 예: 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등.
- Vue.js
- 2013년 출시된 JavaScript 프레임워크이다.
- Angular와 React의 장점을 수용한 프레임워크이.
- 사용 예: 샤오미, 알리바바, 깃랩, 어도비 등.
2. React란?
- React: 화면(UI)을 만들기 위한 JavaScript 라이브러리이다.
- 현재 프론트엔드 개발 환경에서 가장 많이 활용되고 있는 라이브러리이다.
- 특징: 사용자와 상호작용이 가능한 동적 UI 제작이 가능하다.
- React 공식 사이트: https://react.dev.
3. React의 주요 특징
1) Data Flow
- React는 단방향 데이터 흐름을 사용.
- 양방향 데이터 바인딩은 규모가 커질수록 데이터 흐름 추적이 복잡해짐.
- 단방향 데이터 흐름으로 유지보수가 쉬워짐.
2) Component 기반 구조
- Component: 독립적인 단위의 소프트웨어 모듈.
- UI를 작은 부품 단위로 쪼개 관리 및 재사용 가능.
- 캡슐화(Encapsulation)를 통해 내부 데이터와 처리를 외부에 노출하지 않음.
- React는 UI를 여러 Component로 나누고 조립하여 화면을 구성.
- 장점:
- Component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 쉽다.
- 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이
높다. - 코드를 반복할 필요 없이 Component만 import 해서 사용하면 된다
는 간편함이 있다. - 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이하다.
- Header, Footer 등 구조를 Component로 제작 가능하다.
3) Virtual DOM
- Virtual DOM: DOM Tree 구조와 유사한 가상 구조를 메모리에 저장한다.
- 실제 DOM을 조작하기 전에 Virtual DOM에서 변경사항을 계산한다.
- 변경점만 업데이트하여 효율성과 속도를 개선할 수 있다.
4) Props and State
- Props:
- 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터.
- 자식에서는 props 변경 불가능, props를 전달한 최상위에서만 변경 가능하다.
- State:
- 컴포넌트 내부에서 선언되고 값을 변경 할 수 있다..
- 함수형, 클래스형 컴포넌트에서 사용 가능하고, 각각의 state는 독립적으로 존재한다.
5) JSX
- JSX는 JavaScript + XML로 React Element를 생성하는 문법.
- 사용 예:
(필수는 아니지만 편의성을 위해 대부분 사용.)const element = <h1>Hello, world!</h1>;
4. React 개발 도구
1) Node.js & NPM
- Node.js는 React를 사용하기 쉽게 하는 도구를 내장하고 있다.
- NPM(Node Package Manager):
- 프론트엔드 프로젝트에 필요한 패키지 설치 및 관리. (React도 하나의 패키지로 제공됨.)
- 프론트엔드 프로젝트에 필요한 패키지 설치 및 관리. (React도 하나의 패키지로 제공됨.)
2) Babel
- 옛날에는 큰 기능을 하지 않는 자바스크립트 컴파일러(해석기)였지만 리
액트에서는 중요한 역할 - 최신 JavaScript 문법을 이전 버전으로 변환하여 브라우저 호환성 확보.
3) Webpack
- 여러 파일과 모듈을 하나로 번들링(합쳐준다.).
- 코드 변경 사항을 실시간으로 반영되는 기능이다.
5. React 프로젝트 생성 및 구조
1) 프로젝트 생성
- React App 이름 규칙:
- 대문자 사용 불가.
- 단어는 하이픈(-)으로 구분.
- 명령어 :
npx create-react-app my-app
( 여기서 my-app 이부분은 내가 만들 파일 이름 작성해주면 됨 )
2) 프로젝트 실행
- 실행 명령어 :
npm start
3) 기본 디렉토리 구조
/node_modules: 모듈 및 의존성 정보./public:index.html과favicon.ico파일 포함. → 가상 DOM을 위한 html파일이 들어있는곳/src: 실제 React 컴포넌트를 작성하는 디렉토리..gitignore: Git에 올리지 않을 파일 목록.package.json: 프로젝트 메타데이터 및 의존성 정보.README.md: 리드비 파일도 같이 생성됨
6. React 요약
- React는 단방향 데이터 흐름과 Component 기반 구조로 복잡한 UI 관리와 재사용이 용이.
- Virtual DOM과 JSX를 통해 효율성과 편리함을 제공.
- Node.js, Babel, Webpack 등 도구를 통해 현대적인 개발 환경 구축 가능.
킵고잉~