React (리액트) 란?
리액트(React, React.js 또는 ReactJS)는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.
구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다.
💬 라이브러리 : 자주 사용되는 기능을 정리해 모아 놓은 것
리액트의 특징
1. Component-Based (컴포넌트 기반)
리액트는 컴포넌트 기반의 UI 라이브러리이다.
컴포넌트란 독립적으로 존재할 수 있는 UI요소, 페이지에서 화면을 이루고 있는 구성 요소를 의미한다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.
컴포넌트 기반의 장점은 다음과 같다.
- 구조를 한눈에 파악하기 쉬움
- 재사용성이 뛰어남
- 컴포넌트만 import 하여 사용하면 되므로 간편함
2. Declarative Programming (선언형 프로그래밍)
✨ 선언형 vs 명령형
선언형은 내가 원하는 것 즉 목적만 명시하면 그 과정까지는 구구절절 설명할 필요 없이 나머지는 알아서 하겠다는 뜻이고
명령형은 목적을 이루기 위해 구구절절 설명하는 걸 뜻한다.
코드로 예를 들어 알아보자.
다음은 전달받은 객체 배열에서 check 속성을 기준으로 필터링한 결과를 반환하는 함수를 구현한 코드이다.
🔗 방식 A
function getCheckedPersonList(personList) {
const resList = [];
for (let i = 0; i < personList.length; i++) {
if (personList[i].check) {
resList.push(personList[i]);
}
}
return resList;
}
const personList = [
{ name: "이정환", check: false },
{ name: "홍길동", check: true },
{ name: "이순신", check: false },
{ name: "유관순", check: true },
];
console.log(getCheckedPersonList(personList));
// 출력 : [ { name: '홍길동', check: true }, { name: '유관순', check: true } ]
🔗 방식 B
const personList = [
{ name: "이정환", check: false },
{ name: "홍길동", check: true },
{ name: "이순신", check: false },
{ name: "유관순", check: true },
];
console.log(personList.filter((it) => it.check));
// 출력 : [ { name: '홍길동', check: true }, { name: '유관순', check: true } ]
둘 다 동일한 결과와 동작을 보장한다. 다만 한 가지 차이가 있다. 바로 A는 코드량이 길고, B는 짧다는 것이다.
그 이유는 A는 원하는 목적(필터링)을 이루기 위해 해야 할 일을 순서대로 모두 명시하는 명령적인 방식으로 작성된 코드이고
B는 목적(필터링)만 단순히 명시한 선언적인 방식으로 작성된 코드이다.
여기서 또 한가지 알 수 있는 중요한 사실은 선언적으로 작성된 코드는 사실 명령적으로 작성된 코드를 추상화한 것이다.
추상화라는 건 굳이 알 필요 없는 복잡한 개념을 내부로 감추는 것이다.
우리가 필터링하는 동작 원리까지 알 필요는 없고, 그저 filter라는 이름으로 사용하게 하는 것처럼.
즉, 리액트는 훌륭한 추상화를 통하여 UI를 선언적인 표현으로 간결하게 컨트롤할 수 있는 수단을 제공한다.
3. Virtual DOM (가상 돔)
✨ DOM
DOM은 Documnet Object Model의 약자로 웹 페이지를 정의하는 하나의 객체라고 생각하면 된다. 쉽게 말해 하나의 웹 사이트에 대한 정보를 모두 담고 있는 큰 그릇이라고 보면 된다. 약어이다.
웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다.
DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.
DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 저하될 수 있다.
✨ Virtual DOM
리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.
Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 마치 실제 DOM의 가벼운 사본과 비슷하다.
✨ 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
리액트 개발 시작하기
Create React APP
리액트 개발사인 Meta에서 공식으로 제공하고 있으며 명령어 하나로 리액트 프로젝트를 시작할 수 있다.
작업할 PC에 Node.js를 설치하고 터미널이나 커맨드 라인에서 다음 명령어를 실행한다.
🔽 리액트 프로젝트를 작성하는 명령어
npx create-react-app [프로젝트명]
npx는 설치되어 있지 않은 패키지를 딱 한 번만 실행하고 지워버리는 도구이다.
🔽 my-app이라는 이름의 리액트 프로젝트를 만드는 경우
npx create-react-app my-app
실행한 폴더 안에 my-app이라는 이름의 폴더가 만들어진다. 거기로 이동해 시작 명령어를 실행하면 로컬 상태에서 리액트를 기동 할 수 있다.
🔽 로컬 환경에서 명령어 실행
cd my-app
npm start
이 명령어를 실행한 뒤 웹 브라우저에서 http://localhost:3000/에 접속한다.
앱을 종료하고 싶으면 Ctrl + C를 누르면 된다.