[스터디]리액트를 다루는 기술 – 리액트 시작

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가지 절차를 밟는다
    1. 전체UI를 Virtual DOM에 리렌더링한다.
    2. 이전 Virtual DOM과 현재를 비교한다.
    3. 바뀐 부분만 실제 DOM에 적용한다.

3. 작업환경 구성

  1. node.js / npm을 설치한다.
  2. 에디터를 설치한다.(여기서는 intelliJ를 사용함)
  3. Git을 설치한다.
  4. 프로젝트를 만든다.
    • 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/ 에서 확인

참고 : 위 글은 “리액트를 다루는 기술”라는 도서를 스터디하면서 요약/정리한 내용입니다.

You may also like...

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다