React
[React]React를 입문해보자! (1)
React가 무엇인지, 정의와 특징을 간단히 정리합니다. 그동안 Vue만 사용해 왔기 때문에, 장단점을 비교하면서 직접 실습한 내용을 기록하려고 합니다.
1. React란?
React는 UI 구성 요소를 기반으로 사용자 인터페이스를 구축하기 위한 무료 오픈 소스 프론트 엔드 JavaScript 라이브러리입니다.
- react는 facebook에서 제공해주는 프론트엔드
라이브러리라고 볼 수 있습니다. - React는
컴포넌트기반으로 이루어져 있습니다. 복잡한 UI를 컴포넌트로 나눠 관리하고, DOM과 별개로 상태를 관리할 수 있습니다.
현재 웹과 앱의 화면을 개발할 때 가장 많이 쓰이는 도구 중 하나입니다.
1-1 React를 왜 사용할까?
React 없이도 HTML, CSS, JavaScript로 웹 페이지를 만들 수 있지만, React를 사용하면 더 동적인 페이지를 만들 수 있고 이후 앱 개발로 확장하기도 쉽기 때문이라고 생각합니다.
장단점을 정리하면 다음과 같습니다.
장점
- 공식 문서와 방대한 커뮤니티, 자료가 있어 배우기 쉽습니다.
- 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능을 지원합니다.
- UI 수정과 재사용이 쉽고, 코드 가독성을 높일 수 있습니다.
- Controller, directive, template, model, view처럼 로직을 나누지 않고 컴포넌트 하나로 관리합니다.
- 다른 framework나 라이브러리와 병행해서 사용할 수 있습니다.
단점
- 러닝 커브가 있습니다.
- IE8 이하 버전은 지원하지 않습니다.
- 화면 외의 기능은 직접 구현하거나 라이브러리를 써야 해서 JavaScript 배경지식이 필요합니다.
- 데이터 모델링, 라우팅, Ajax 같은 기능은 기본으로 제공하지 않습니다.
- 처음 로딩 시간이 길 수 있습니다.
- 웹이 지향하는 방식과는 다소 차이가 있습니다. a. 웹: 콘텐츠를 스트리밍하듯 받아오며, 페이지는 HTML을 담은 가벼운 응답으로 구성됩니다. b. React: 처음에는 빈 페이지를 띄운 채 필요한 JavaScript를 내려받습니다. 한 번 받은 뒤에는 다시 받지 않아도 되지만, 처음에 보이는 것이 없다는 점이 다릅니다.
최근 프론트엔드의 추상화에 대해 고민하다가 토스 SLASH 21의 발표 자료를 읽고, 이렇게 깔끔한 코드를 짜고 싶다는 생각이 들었습니다. https://toss.im/slash-21/sessions/3-3 관심 있는 분들을 위해 링크를 남겨 둡니다.
2. React 개발 환경 설정
2-1. Node.js 설치
React를 시작하기 전에 Node.js가 설치되어 있어야 합니다. https://nodejs.org/ko/에서 Node.js LTS 버전을 내려받고, 설치 가이드를 참고해 설치합니다.
설치 후 Windows는 PowerShell이나 CMD, Mac은 터미널을 열고
node -v를 입력해 아래처럼 버전이 나오면 정상적으로 설치된 것입니다. 
저는 yarn을 사용하기 때문에, yarn도 설치하려면
yarn 설치 가이드를 참고하면 됩니다.
Mac에서 설치 중 권한 오류가 나면 npm 앞에 sudo를 붙여 실행합니다.
2-2. React 생성
설치가 끝나면 프로젝트를 만들 디렉터리에서
$ yarn create react-app [생성할 파일 이름]
$ yarn create react-app react-todo
위 명령어를 실행하면 아래처럼 파일이 생성됩니다.
그다음
$cd [생성한 파일명]
$cd react-todo
생성한 디렉터리로 이동해서
$ yarn start
명령어를 실행했을 때 아래와 같은 화면이 나오면 성공입니다.
다음 글에서는 기본 세팅과 JSX를 정리합니다.
댓글 0