길고 긴(그래봤자 2주) 프로젝트 기간이 끝나고 드디어 다시 수업 시간이 돌아왔습니다.. (프로젝트 후기도 커밍쑨,,,)
이번부터는 React에 대해 배운답니다!
📌 프론트엔드 3대장
... 3대장?
썸네일 참고
(사실 원피스 안 봄ㅋㅋㅋㅋ)
프론트엔드 3대장은 원피스가 아니고,, Angular JS, React JS, Vue.js 라고 합니다. 각각의 특징은 지금부터 다뤄볼게요!
📣 Angluar JS
- 구글에서 만든 JavaScript 기반의 오픈 소스 프레임워크
- 신버전(Angular)에서는 TypeScript에 맞춰 기존의 프레임워크를 모두 갈아 엎었다고 한다...! (역시 구글,,)
- 양방향 데이터 바인딩 → 양방향 웹 애플리케이션에 적합
- 2016년 이후 점유율 하락 중
- 3대장 중에서 가장 배우기 까다롭다는 평가를 들으며 가장 인기가 없음
- 유튜브, 페이팔, 구글, 텔레그램 등등
📣 React JS
- 동적 사용자 인터페이스를 만들기 위해 2011년에 페이스북에서 만든 오픈 소스 JavaScript 라이브러리
- 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합
- Angular 보다 배우기 쉽다고 이야기 됨
- 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등
📣 Vue.js
- 2013년 출시된 JavaScript 프레임워크
- Angular와 React의 장점을 수용한 프레임웤,
- 중국어 기반(..!)으로 레퍼런스가 적음
샤오미, 알리바바, 깃랩, 어도비 등
🟠 프레임워크 VS 라이브러리
위 설명을 쭈욱 읽다보면 드는 의문,,
프레임워크랑 라이브러리를 많이 들어보긴했는데,, 그래서 둘의 차이가 뭔데?
프레임워크와 라이브러리의 차이 - 1
프레임워크와 라이브러리의 차이 - 2
요약하자면,,
라이브러리는 단순한 클래스들의 집합체, 프레임워크는 여러 기능을 가진 클래스와 라이브러리가 합쳐진 형태
즉, 라이브러리는 집을 직접 짓는 것, 프레임워크는 이미 지어진 집에 방을 정렬하는 것
이라는데,,, 이건 아마도 이런 저런 프레임워크, 라이브러리를 접하게 되면 이해할 수 있겠죠...?
📌 React 란?
- 화면을 만들기 위한 JavaScript 라이브러리
- 현재 프론트엔드 개발 환경에서 가장 많이 활용되고 있는 라이브러리
- 사용자와 상호 작용이 가능한 동적 UI 제작 가능
📣 React의 특징
🟠 Data Flow
- 단방향 데이터 흐름 (부모 → 자식)
- Angular JS처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있음
데이터 바인딩이란?
화면에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)을 묶어서(Binding) 서로 간의 데이터를 동기화하는 것
- ex) HTML에서 서버 혹은 스크립트 상에서 받아온 데이터를 화면 상에 그려주고 있을 때, 해당 값이 변경될 경우 다시 HTML 상에 데이터를 변경된 값에 따라서 맞추어 주는 동작
단방향 데이터 바인딩이란?
JavaScript(Model)에서 HTML(View)로 한 방향만 데이터를 동기화하는 것
- 컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조
🟠 Component 기반 구조
- React의 핵심!
- Component
- 독립적인 단위의 소프트웨어 모듈
- 소프트웨어를 독립적인 하나의 부품으로 만드는 방법
- React는 UI(View)를 여러 Component로 쪼개서 만듦
- 한 페이지 내에서 여러 부분을 Component로 만들고 이들을 조립하여 화면을 구성함
장점
1. Component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 쉬움
2. 기능 단위, UI 단위로 캡슐화시켜 코드 관리 → 재사용성이 높음
3. 코드를 반복할 필요 없이 Component만 import해서 사용하면 됨 → 간편함
4. 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이함
컴포넌트를 조합해 Root Component(최상위 컴포넌트)로 만든 모습
🟠 Virtual Dom
- DOM : Document Object Mode (문서 객체 모델)
- React는 DOM Tree 구조와 같은 구조를 Virtual DOM으로 가지고 있음
- 이벤트가 발생할 때마다 Virtual DOM을 만들고 다시 그릴 때 실제와 전후 상태를 계속 비교 → 차이점만 다시 그려주므로 앱의 효율성과 속도 개선!
🟠 Props and State
-
Props
- 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터 (단방향)
- 자식에서는 props 변경 불가능, props를 전달한 최상위에서만 변경 가능
-
State
- 컴포넌트 내부에서 선언되고 내부에서 값을 변경 → 하나의 컴포넌트 안에서 처리
- 본래 클래스형 컴포넌트에서만 사용 가능했으나, 현재는 함수형 컴포넌트에서도 사용 가능 (각각의 state는 독립적)
🟠 JSX
- React에서 JSX 사용이 필수는 아니지만 편의성을 위해 대부분의 프로젝트에서 JSX를 사용
- JSX = JavaScript + XML
- JavaScript를 확장한 문법으로 React Element를 생성
📌 Node.js & NPM
- Node.js는 React를 사용하기 쉽게 하는 도구를 내장하고 있음
- Node.js와 함께 설치되는 NPM(Node Package Manager)를 이용하면 프론트엔드 프로젝트를 위한 다양한 패키지를 쉽게 설치하고 관리 가능
- React도 하나의 패키지!
- JavaScript 런타임인 Node.js 기반으로 만들어진 Webpack과 Babel 같은 도구를 자주 사용
📣 Babel
- 옛날에는 큰 기능을 하지 않는 JavaScript 컴파일러 → 리액트에서는 중요한 역할
- 최신 JavaScript 문법을 이전 버전의 JavaScript 문법으로 변환해주어 다양한 브라우저에서 호환성에 문제없이 코드 실행 가능
📣 Webpack
- JavaScript Module Bundler
- 여러 개의 파일과 모듈을 하나의 파일로 합쳐줌
- 코드 변경사항 발생 시 바로 반영되는 기능
📌 React 프로젝트 생성
📣 생성
- 리액트 앱(프로젝트) 이름 규칙
- 대문자 사용 불가
- 단어 여러 개 사용 시, 하이픈(-) 기호로 구분
- npx
- npm의 자식 명령어로 npm보다 가볍게 패키지를 구성
- npm 버전이 5.2 이상일 때, node 버전이 14 이상일 때 사용 가능
$ npx create-react-app 리액트 앱 이름 (ex. text-app)🟠 프로젝트 구조
- /node_modules : npm을 시작하면 생기는 폴더, 내부에 모듈과 관련된 정보가 들어있음
- /public : index.html & favicon.ico 등의 가상 DOM을 위한 html 파일이 들어있음
- /src : 실제 React 코드(컴포넌트)를 작성하는 곳
📣 실행
npm start📌 Component
- React에서 화면을 구성하는 하나의 부분 → React의 핵심
- 내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용 가능
- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 분리 가능
📣 React 컴포넌트 종류
- 클래스형 컴포넌트(Class Component)
- render 함수를 반드시 사용해야 함
- lifecycle 기능
- 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용
- 함수형 컴포넌트(Functional Component)
- 짧고 직관적, 사용방법이 더 간단함
- 메모리 사용에 이점이 있음
📣 Component를 만드는 방법
- 클래스형 컴포넌트 VS 함수형 컴포넌트
- React 초창기에는 함수형 컴포넌트에서 현재 리액트의 핵심기능(state, lifecycle...)등 기능 사용 불가
- React 16.8부터 hooks의 등장으로 함수형 컴포넌트에도 핵심 기능 사용 가능
- 과거에는 다양한 기능을 사용할 수 있는 클래스형 컴포넌트를 사용, 현재는 더 쉬운 문법을 가진 함수형 컴포넌트의 사용 비율이 압도적
- 컴포넌트 이름 명명 시, PascalCase 사용
// 클래스형 컴포넌트
import React, {Component} from 'react';
class ClassComponent extends Component {
render() {
return (
<h1>Class Component</h1>
)
}
export default ClassComponent;
// 함수형 컴포넌트
export default const FubctionComponent = () => {
return
<div>
Functional Component
</div>
}
// default가 아니라 그냥 함수로 선언한다면
// export default 함수명;
// 을 선언해야 함