[스터디]리액트를 다루는 기술 – 리액트 시작
1. 개요
- 요즘은 자바스크립트만으로 대규모의 애플리케이션 개발이 가능해졌다.
- Angular, Backbone.js, Vue.js 등이 있다.
- 이런 프레임워크들은 mvc 아키텍처를 주로 사용한다.
- 페이스북에서 개발한 리액트는 MVC구조에서 V( view)만 신경 쓰는 라이브러리이다.
2. 리액트의 특징
- 컴포넌트를 사용한다.(재사용이 가능한 API이며, html 태그형식의 템플릿과는 개념이 다르다.)
- 컴포넌트는 렌더링, 리렌더링이라는 것을 이용해 Veiw를 구현한다.
- render() { ….. } : 컴포넌트가 어떻게 생겼는지 정의하는 함수
- Virtual DOM을 사용한다. (DOM : Document Object Model, 객체로 문서를 표현하는 방법이다.)
- Vritual DOM은 실제 DOM을 접근하여 조작하지 않고, 추상화한 자바스크립트 객체를 구성하여 사용한다.
- 데이터가 변하여 웹 브라우저에서 실제 DOM을 업데이트할 때에는 아래의 3가지 절차를 밟는다
- 전체UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM과 현재를 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
3. 작업환경 구성
- node.js / npm을 설치한다.
- node.js 다운로드 : https://nodejs.org/ko/download/
- 에디터를 설치한다.(여기서는 intelliJ를 사용함)
- Intellij : 유료, https://www.jetbrains.com/ko-kr/idea/download/#section=windows
- VS Code (Visual Studio Code) : MS에서 만든 무료 에디터, https://code.visualstudio.com/
- Git을 설치한다.
- 버전관리 프로그램
- https://git-scm.com/downloads
- 프로젝트를 만든다.
- IntelliJ를 실행하고 File -> New -> Project -> Static Web -> React App 선택
- Node interpreter : 설치된 노드 경로를 선택한다.
- Package Manager : node.js 기본패키지 매니저인 npm을 선택하거나, yarn을 별도로 설치하여 선택할 수도 있다.(yarn이 속도가 빠르다고 한다.)
- finish를 누르면 콘솔에 따로 명령어를 입력하지 않아도, 관련 패키지를 자동으로 다운로드 프로젝트 작업환경을 구축해 준다.
- VS Code를 사용하는 경우 아래의 명령어를 직접 입력하여 프로젝트를 생성해야 한다.
- $ yarn create react-app <프로젝트이름>
- 또는 $ npm init react-app <프로젝트이름>
- 프로젝트 디렉토리로 이동 후 아래 명령어로 서버를 구동한다.
- $ yarn start 또는 npm start
- http://localhost:3000/ 에서 확인
참고 : 위 글은 “리액트를 다루는 기술”라는 도서를 스터디하면서 요약/정리한 내용입니다.
최신 댓글