오늘은 React란 무엇인지, 정의와 특징에 대해 간단히 정리하려고 해요.
저는 vue만 사용했었기에 특징과 장점이 무엇인지 장단점을 비교해가면서 직접 실습 및 기록을 하기 위해 작성합니다.
1. React란?
React는 UI 구성 요소를 기반으로 사용자 인터페이스를 구축하기 위한 무료 오픈 소스 프론트 엔드 JavaScript 라이브러리입니다.
- react는 facebook에서 제공해주는 프론트엔드
라이브러리라고 볼 수 있습니다. - react는
컴포넌트기반으로 이루어져 있다. 복잡한 UI를 컴포넌트로 관리하여 돔과 별개로 상태 관리가 가능합니다.
현재 웹/앱의 View를 개발할 수 있도록 하는 인기 있는 프레임워크 중에 하나입니다!
1-1 그래서 react를 왜 사용하는데?
react를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있지만, react를 이용해 좀 더 역동적인 페이지를 제작할 수 있고 추후에 애플리케이션을 개발할 경우 좀 더 쉽게 제작할 수 있기 때문이지 않을까 싶어요
장단점을 소개한다면
장점으로는 ❤️
- React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있어요
- 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능을 지원합니다.
- UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있어요.
- Controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 해요
- 다른 framework나 라이브러리와 병행해서 사용할 수 있습니다.
단점으로는 💔
- 러닝커브가 커요
- IE8 이하 버전은 지원하지 않아요.
- view 이외의 기능은 직접 구현하거나 라이브러리를 사용해서 구현해야 하기에 javascript 배경지식이 필수에요.
- 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안돼요.
(치명적) 로딩시간이 길어요. - 웹의 궁극적 지향점과는 다소 동떨어져있어요.
a. 웹의 핵심: 모든 것을 streaming하며, 페이지들은 HTML 태그들을 내포하고 가벼운 response만 브라우징합니다.
b. 리액트: 사이트에 필요한 자바스크립트를 처음에는 공백 페이지를 띄우며 다운로드 한다. 한번 다운로드 한 이후에는 다시 리소스를 다운하지 않아도 되지만, 처음 보이는 것이 없다는 것이 streaming 과의 차이에요.
며칠 전부터 프런트엔드의 추상화에 대해 고민을 많이 했는데 토스 코어의 지유림 개발자님께서 올리신 PPT를 읽고나도 저렇게 클린 코딩을 하고 싶다! 라는 생각이 들었어요
https://toss.im/slash-21/sessions/3-3
한번 읽어보실 분들을 위해서 주소를 남겨 드릴게요 ⤴️
2. React 개발 환경 설정
2-1. Node.js 설치
우선 react를 시작하기 전에 node.js가 설치되어 있어야 해요
https://nodejs.org/ko/ 링크에서 먼저 node.js LTS 버전을 다운로드한 후에 https://offbyone.tistory.com/441 여기를 참고해서 설치를 완료해 주세요
그 후에 윈도우 사용자면 파워 셀 , Cmd 맥 사용자는 터미널을 열어
$ node -v 를 치고 
화면과 같이 버전이 나오면 정상적으로 설치가 된 거예요
저는 yarn을 이용해서 작업을 하기에 yarn 설치까지 하실 분은
https://cntechsystems.tistory.com/34 을 참고해서 완료하시면 될 거 같아요
참고로 mac 유저들은 install에 오류가 나면 npm 앞에 sudo라는 단어를 추가하시면 될 거예요
2-2. React 생성
설치가 완료되면 생성할 디렉터리에 위치하여
$ yarn create react-app [생성할 파일 이름]
$ yarn create react-app react-todo위와 같이 명령어를 작성하게 되면 아래와 같이 파일이 생성이 될 거예요
그 후에
$cd [생성한 파일명]
$cd react-todo생성한 디렉터리로 위치하여
$ yarn start위와 같은 명령어를 치게 되었을 때 아래와 같이 화면이 출력되면 성공한 겁니다!
여기까지 출력되었으면 2탄에서 만나요~!
reference
