[React] React란? React의 특징, 장단점, JSX
📑 개요
React.......... 이거 사족으로 할 말 많다.
나는 SSAFY 1학기 때 상당히 지지부진했기 때문에 2학기 때 팀에 민폐가 되지 않을까 걱정가득인 상태였고
인사 정도만 하던 언니 한명 제외하고는 다 처음 보는 사람들 사이에서 2학기 첫 프젝을 시작했다...
내가 그 팀 제의 들어왔을 때 들어간 이유가 두 개 있었는데 그 중 큰 역할이었던 하나...
팀에 전공자 프론트가 있다는 것.
그 친구한테 배울 거 다 배우고 실력 키우자...!! 라는 생각으로 친한 사람들과의 팀 결성은 슬프지만 안녕했고...
결과적으로 React보다 React Native를 먼저 경험하게 됐다...😐ㅎ
그러고 다음 프로젝트에서 바로 또 React와 TypeScript...
이거 정말 그 당시 내 상태.
HTML CSS JS로도 잘 못 짜는데 React요?!?!😱 TypeScript요?!?!😱 StyledComponent요?!?!😱
하지만 사람은 시키면 다 하게 되는 법............................................
아쉬운 건 급하게 실전으로 부딪힌 거라 나도 코드를 짤 순 있어도 이론적인 게 부족하다 느꼈는데
이렇게 정리할 수 있게 되어 참 좋다...... 참.........😂!!!!! 좋아.....!!!!!!!
나중 가면 또 이거 짱이야 이거 써! 하고 시대가 변하겠지만
적어도 포스팅을 하는 지금은 프론트 개발자라면 React가 압도적으로 필수인 시대다.
React 기본기 다지러 가보자!
🤔 리액트(React)가 뭐예요?
리액트는 Facebook에서 만든 JavaScript 라이브러리로 복잡하고 동적인 UI 개발을 효율적이게 해준다.
리액트 공식 사이트에는 " 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 " 라고 적혀있다.
한국어 버전 사이트가 있으니 시간이 된다면 찬찬히 읽어보는 것도 좋다.
(근데 이제 사이트 업뎃 안 할 거니까 react.dev 가라고 상단에 적혀있긴 함...)
https://ko.legacy.reactjs.org/
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
- React는 라이브러리?
React는 프레임워크가 아닌 view 만을 담당하는 라이브러리다.
생태계 자체는 굉장히 크지만 라우팅, 상태 관리 등 기본적인 제공이 부족하기 때문이다.
해당 부분에 있어서는 사용 시 라이브러리를 별도로 추가해줘야 한다.
- 프레임워크와 라이브러리가 달라요?
처음 개념을 접하면 일단 이 차이점부터 알아보자.
Vue, Angular와 React의 차이를 묻는 질문으로 자주 나오는 단골 소재.
| Framework | Library |
| Angular, Vue | React |
| 프레임워크가 제어 흐름의 주도권을 가지고 있다. | 개발자가 제어 흐름의 주도권을 가지고 있다. |
| 예를 들면, 이미 지어진 건축 구조물의 경우 기둥이나 방의 개수, 주방의 위치 등 뼈대는 바꿀 수 없다. 개발자가 변경할 수 있는 것은 그 안에 있는 가구의 위치 같은 요소들 뿐이다. |
예를 들면, 이미 준비된 재료로 가구를 조립하는 것이다. 나무를 벌목하는 것부터 시작하는 게 아니라 가구점 같은 데서 만들어진 기본 재료를 구매해 개발자가 원하는 대로 가구를 조립할 수 있다. |
🌈 React의 특징
- Virtual DOM
등장 배경
기존의 DOM (Document Object Model : 문서 객체 모델) 은 HTML, XML, CSS 등을 트리 구조로 표현한다.
웹 페이지의 요소에 동적으로 접근하고 수정하는 데 사용되며,
웹 애플리케이션의 동적인 기능을 구현하는 데 중요한 역할을 하였다.
하지만 DOM를 직접 조작하는 방식에 한계가 있었기 때문에 React에는 Virutal DOM이라는 개념이 도입되었다.
Virtual DOM 이란?
가상 돔 (Virtual DOM) 은 UI를 더 효율적으로 업데이트 하기 위한 것으로
데이터가 변할 때마다 화면을 새로 띄우지 않고,
가상 DOM에 변화를 먼저 입력한 다음 실제 DOM과 가상 DOM의 비교를 통해 변경된 부분만을 감지하여 업데이트 한다.
이를 통해 성능을 향상시키고 복잡한 UI의 관리를 쉽게 하는 것이다.
Virtual DOM도 개념이 복잡해서... 포스팅을 따로 했다.
[React] React 원리 & 가상 돔(Virtual DOM)의 정의와 작동원리
📑 개요 사실 그냥 이전 포스팅에서 리액트 설명할 때 가상돔 간단히 쓰면 되겠지~ 했는데 작성하다보니 가상 돔은 이렇게 간단히 끝낼 게 아닌 거 같은데...... 싶어서 이전 포스팅의 보충 포스
chachauniverse.tistory.com
- 단방향 데이터 바인딩
React는 데이터가 한 방향으로만 흐르는 단방향 데이터 바인딩을 가지고 있다.
단방향 데이터 바인딩을 알기 전에 양방향 데이터 바인딩에 대해 간단히 소개하겠다.
양방향 데이터 바인딩
- 개념
데이터의 변경의 감시자와 UI 요소의 상태 변경 감시자가 서로 영향을 주어 동시에 업데이트 되는 방식이다. - 장점
개발자가 JavaScript 내의 데이터 변경과 사용자 UI 데이터 변경에 대한 동기화를 신경쓰지 않을 수 있다. - 단점
하나의 데이터 동기화에 두 개의 감시자가 있기 때문에
UI가 복잡해지고 규모가 커질수록 데이터 동기화에 필요한 감시자가 많이 생성되어
데이터 흐름 추적이 복잡해지며 성능 저하가 발생할 수 있다.
React의 단방향 데이터 바인딩
- 개념
하나의 감시자가 JavsScript의 데이터 변경을 감지하여 UI로 전달되고 화면이 업데이트 되는 방식이다. - 장점
하나의 감시자만 있으므로 규모가 커질 때 생기는 성능 저하 이슈를 해결하고 DOM 객체 갱신이 가능하다. - 단점
사용자의 입력 데이터를 감지하고 화면에 업데이트 하는 코드를 매번 작성해야 하기 때문에 양방향 바인딩 방식에 비해 코드 양이 많아진다.
- Component 기반의 구조
Component 구조는 React의 개발 생산성을 높여주는 데 큰 역할을 한다.
컴포넌트라는 특정 기능을 수행하는 작은 코드를 기본 단위로 하여 UI를 구성한다.
레고를 조립할 때 작은 부품들로 다양한 형태를 완성하는 것과 비슷하다.
- 장점
- 화면을 구성하는 UI 요소들을 컴포넌트로 분리해 개발하기 때문에 전체 코드의 파악이 상대적으로 쉽다.
- 컴포넌트들을 조합해서 복잡한 UI를 구성하므로 재사용성이 높고 생산성을 높여준다.
- 오류 발생 시에도 전체 페이지를 수정하지 않고 해당 컴포넌트만 수정하면 되어서 간편하다.
Component 에는 Class Component와 Functional Component로 나뉜다.
해당 부분도 따로 포스팅을 했다.
[React] 클래스형 & 함수형 컴포넌트의 생성과 차이, 장단점
📑 개요 컴포넌트 단위의 개발... 익숙해지면 괜찮다. 익숙하지 않을 땐 익숙해지는 과정이 귀찮을지도. 그치만 컴포넌트 단위로 하면 확실히 보기도 편하고 수정도 편해서 안 쓸 수가 없다. 처
chachauniverse.tistory.com
- JSX (JavaScript XML)
React에서 UI를 작성하기 위해 JSX라는 독특한 문법을 가지고 있다.
JavaScript의 확장 문법으로 JavaScript와 XML 또는 HTML을 동시에 사용해서 HTML에 JavaScript 변수를 바로 사용할 수 있게 도와주는 템플릿 언어이다.
다만, JSX로 작성한 코드는 JavaScript가 인식할 수 없으므로 Babel 패키지를 통한 변환이 필요하다,
const App = () => {
const name = '차뀨뀨';
return <div>내 이름은 {name}!</div>;
};
예시와 같이 HTML 태그를 JavaScript에서 사용이 가능하고 변수를 HTML 태그에서 바로 호출하여 쓸 수 있다.
따라서 가독성이 높아지고 직관적인 방식으로의 사용이 가능해진다.
- 선언형 프로그래밍
프로그래밍에는 선언적 방식과 명령적(절차적) 방식이 있다.
React는 그 중 선언적 방식을 따른다.
설명을 위해 동일한 작업을 수행하는 예시코드를 살펴보자.
- 명령형 프로그래밍
어떻게(How) 할 것인가?
// 명령형 프로그래밍 방식
function sumArray(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
const numbers = [1, 2, 3, 4, 5];
console.log(sumArray(numbers)); // 출력: 15위의 코드는 반복문을 사용하여 배열의 합을 계산하고 있다.
이런 식으로 과정을 중심으로 어떻게 할 것인지에 집중하는 방식을 명령형 프로그래밍이라고 한다.
- 선언형 프로그래밍
무엇(What)을 할 것인가?
// 선언형 프로그래밍 방식
function sumArray(arr) {
return arr.reduce((acc, curr) => acc + curr, 0);
}
const numbers = [1, 2, 3, 4, 5];
console.log(sumArray(numbers)); // 출력: 15
똑같이 배열의 합을 계산하지만 reduce()라는 메서드를 사용하여 배열의 각 요소에 대해 주어진 함수를 실행하고 하나의 결과값을 반환한다.
reduce()의 동작 방식이 아닌 무엇을 할 것인지에 집중하는 방식을 선언형 프로그래밍이라 한다.
리액트는 이 중 선언형 프로그래밍 방식으로 코드를 더 간결하게 해주고 가독성을 높여준다.
✔ 리액트의 장단점
사실 지금까지 설명한 게 리액트의 장점 나열 아닌가...!!!!!!
그치만 한 번 더 정리해보자........
리액트의 장점
- Virtual DOM을 통해 실제 DOM 조작을 최소화하여 성능 향상
- 단방향 데이터 바인딩을 통해 규모가 커질 때 생기는 성능 저하 이슈 해결
- 컴포넌트 기반으로 코드의 재사용성이 높고 유지보수가 쉽다.
- JSX 방식으로 HTML 태그를 JavaScript에서 사용이 가능해져 직관적이다.
- 선언형 프로그래밍 방식으로 코드가 간결하고 가독성이 높다.
리액트의 단점
- JSX 문번이나 컴포넌트 아키텍처 등 처음 사용 시 러닝커브가 높다.
- JavaScript에 대한 배경지식이 필수적이다.
- 상태 관리나 라우팅에 따로 라이브러리 추가가 필요하다.
✨ 마무리
오랜만에 포스팅이다...
요즘 몸도 안 좋고 해서 그냥 요약본으로 빨리 CS 정리를 하느라 포스팅은 못했다.
다들 감기 조심................
사실 지금도 다 낫진 않았어서... CS 마감까지 시간이 별로 없는데...😂
다른 내용은 짧게 정리해야하나 고민중....
암튼 리액트... 써보면 굉장히 편한 아이니 추천하고 갑니다...
- 요약
- 리액트
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 - 리액트의 특징
- Virtual DOM
- 단방향 데이터 바인딩
- 컴포넌트 기반
- JSX 방식
- 선언형 프로그래밍