vue, angular, react. 프론트엔드 3대장이라 불리는 기술 중, 요즘 가장 핫한 react. 시작해봅시다🤗
시작
모던 웹은 많은 데이터를 사용자한테 보여주고, 받으며 인터렉티브하게 움직인다. 이러한 상황은 DOM을 조작하며 프로그래밍을 하게 되면, 소스 코드가 지저분해질 확률이 높고, 이에 따라 유지보수에도 어려움이 생긴다. 이런 문제를 해결하기 위해 많은 기술들이 나오게 되는데, 대표적인 것들이 위에 언급한 프론트엔드 3대장이다. 이 중 페이스북에서 만든 리액트는 가장 많이 사용되고 있으므로 프론트엔드를 지향하는 사람이라면 한번쯤은 학습해야되는 기술이라고 할 수 있겠다!!
WHY
왜, 리액트를 사용해야 되는가?
1. 많은 데이터를 보여줘야 하는 VIEW를 제작할 때, DOM을 직접 조작하는 것보다
뛰어난 성능을 나타냄.
2. component 단위로 모듈을 쪼개, 재사용성이 뛰어남.
3. 거대한 커뮤니티가 형성되어 있어, 다양한 라이브러리들이 존재왜, 리액트 말고 다른 방법을 선택해야 하는가?
1. 만드려는 어플리케이션이 적은 데이터를 다룬다면, 굳이 리액트를 선택할 필요가 없다.
2. 리액트는 오직 VIEW만 신경쓰는 라이브러리이기 때문에, 다양한 라이브러리를 사용해보아야 한다.
이러한 절차가 어렵게 느껴지고 시간적 여유가 없다면, 다른 방법을 선택하는 것이 더 나은 루트가 될 수 있다.Virtual DOM
리액트의 가장 중요한 특징. Virtual DOM에 앞서 DOM이 무엇인지 알아보자.
- DOM
- Document Object Model의 약어. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성.
- 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용.
- DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입 가능.
- 동적 UI에 최적화되어 있지 않아, 자바스크립트를 사용하여 DOM을 동적으로 만듬
브라우저는 DOM에 변화가 일어나면 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트함. 이 과정에서 시간이 걸리고 리소스를 많이 가져가게 된다.
- Virtual DOM
Virtual Dom을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용. 실제 DOM의 가벼운 사본과 비슷
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 할 때는 다음 세가지 절차를 밟음.
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링함.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교.
3. 바뀐 부분만 실제 DOM에 적용함.
리액트 시작하기
리액트 프로젝트를 만드는 절차를 정리해보자.
1. Node.js / npm, yarn 설치
2. 코드 에디터 설치(Visual Studio Code 설치를 추천)
3. Git 설치 (필수는 아니지만, 프로젝트 형상관리를 위에 반필수적)
4. 리액트 프로젝트를 시작할 폴더 생성(ex mkdir test-react)
5. 폴더로 들어가 npm create-react-app . 입력간단히 정리해봤지만, 이 파트에 내용은 리액트 공식사이트에 잘 정리 되어 있으므로 참고 하시길 바람니다😗
JSX
자바스크립트 확장 문법 XML과 비슷한 생김새를 가지고 잇음. 코드가 번들링되는 과정에서 바벨(웹팩과 바벨에 관해선 따로 정리)을 사용하여 일반 자바스크립트 형태의 코드로 변환.
function App() {
return (
<div>
Hello! <b> There </b>
</div>
)
// 위의 코드가 아래 코드로 변환
function App() {
return React.createElement("div", null, "Hello", React.createElement("b", null, "There");
JSX로 작성한 코드가 자바스크립트만 사용한 코드보다 훨씬 보기 쉽고 익숙함. 이게 JSX를 사용하는 핵심적인 이유.
마무리
리액트는 사실 위에 정리된 내용만으로 기본을 다 알기엔 너무 방대하고, 대단한 라이브러리. 앞으로도 부족하지만 리액트를 공부하며 재밌었고, 알찬 내용들을 이 블로그에 정리해보려고 한다. ㅎㅎㅎㅎㅎㅎㅎㅎ 많은 분들이 리액트를 경험해보고, 흥미를 느끼는데 조금이라도 이 글이 되움이 되었으면😳
