20220624

리액트 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.
Controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 한다.(이게 view역할을 담당한다.)
성능이 뛰어난 가비지 컬렉션, 메모리 관리 기능을 지원한다.
UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.
다른 프레임워크나 라이브러리와 병행해서 사용 할 수 있다.

단점

IE8 이하 버전은 지원하지 않는다.
view 이외의 기능은 직접 구현하거나 라이브러리를 사용해서 구현해야 하기에 자바스크립트 배경지식이 필수 선행이다.
데이터 모델링, 라우팅, Ajax 등 기능 지원이 안된다.
로딩시간이 길다.

리액트가 작동하는 원리

동적으로 변하는 웹 서비스가 많아진 현재 상황에서 사용자에게 더 좋은 인터페이스(UI)와 경혐(UX)을 제공하기 위해서이다.

DOM

DOM은 HTML, XML 문성의 프로그래밍 인터페이스이다. DOM을 활용하면 텍스트 파일이기만 했던 HTML이나 XML 문서에 프로그래밍 언어가 접근 할 수 있도록 한다. DOM은 이름 그대로 문서 구조를 트리 형태의 객체를 표현한다.

하지만, DOM은 동적 UI에 최적화되어 있지 않다는 치명적인 문제점이 한 가지 존재한다. 동적으로 웹 페이지를 변경하다 보면 element의 생성, 수정, 제거 등 DOM을 변화시키는 수 많은 연산이 생기게 된다.

여기에서 React는 Virtual DOM을 활용해 DOM 처리 과정을 최적화하였다.

Virtual DOM

리액트는 Virtual DOM을 활용해 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 즉, 동적으로 데이터가 변화했을 때 직접적으로 DOM을 조작한느 것이 아니라 DOM의 사본이라고 할 수 있는 새로운 Virtual DOM을 생성한다. 그리고 새로 생성된 Virtual DOM과 이전에 저장된 Virtual DOM을 비교해 변경된 부분의 DOM 만을 변경한다. 이 과정을 조화 과정이라고 한다.

리액트 개발 환경 설치

1) Node.js(필수) : 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼으로, 작성 언어로 자바스크립트를 활용한다.

2) 에디터(VS Code)

3) 웹 브라우져

리액트 작업 환경 설정하기

Node.js / npm, yarn 설치하기
코드 에디터 설치하기(주로 비쥬얼 스튜디오 코드를 추천한다.)
Git 설치하기
create-react-app "프로젝트 이름"으로 프로젝트 만들기

앞의 명령문으로 npx(만약 yarn을 설치했다면 yarn)을 작성한다.

tip1. 여기서, Node.js는 최신 버전이 아니라 되도록이면 LTS로 다운 받는 것을 추천한다.

tip2. Node.js의 버전을 알고 싶다면 명령 프롬프트에서 node -v 를 입력하면 확인할 수 있다.

React가 성공적으로 작동한 모습

리액트의 예시

이번에 보여줄 화면은 리액트를 통해서 보여준 것으로 화면에 세 개의 구간으로 이뤄져 있다.

우선, 리액트의 첫 화면은 App.js에 위치에 있다. 이곳에 아래와 같은 코드를 작성한다.

import './App.css';
import Box1 from './component/Box1';

function App() {
  return (
    <div>
      <Box1 name="한국"/>
      <Box1 name="미국"/>
      <Box1 name="중국"/>
    </div>
  );
}

export default App;

App.js

Box1.jsx파일을 만들어서 아래와 같이 작성한다.

만약, 일일이 코드를 작성하는 것이 귀찮다면, 비주얼 스튜디오 코드에 있는 확장을 통해 기능을 추가할 수 있다.

여기서 추가할 확장 기능에 Reactjs code snippets 을 검색해서 추가하면 된다. 그러면, jsx 파일에다 rcc를 입력해서 코드를 추가할 수 있다.

import React, { Component } from 'react';

class Box1 extends Component {
    render(props) {
        return (
            <div className="box">
                Box1
                <p>{this.props.name}</p>
            </div>
        );
    }
}

export default Box1;

Box1.jsx

그 다음에는 App.css를 통해서 화면의 구성을 디자인하면 된다.

.box{
  width : 100px;
  height: 100px;
  border : 1px solid red;
}

App.css

2) 학습내용 중 어려웠던 점

이번 수업은 대체적으로 잘 따라가서 무난했다. 하지만, 강사를 너무 믿어서는 안된다는 말이 나왔듯이 강사도 간혹 막히는 모습을 보여주기도 한다.

3) 해결방법

강의를 듣던 학생이 리액트의 사용법을 알려주어서야 비로서 제대로 해결 할 수 있었다. 내 서랍장에 있는 리액트를 읽어서 복습을 해야 할 필요가 있다.

4) 학습소감

리액트를 소개하는 시간이었고 나는 이번 수업을 리액트에 관한 복습으로 보았다. 리액트는 프론트엔드에서 2022년 현재 가장 높은 점유율을 보이는 프레임워크다. 자바스크립트는 ES6 이후에 두각을 드러낸 프로그래밍 언어로 본래는 프론트엔드에 쓰였으나 이후 Node.js와 같은 백엔드 프레임워크에서도 쓰여진다.

jungkwanlee

coding

이전 포스트

20220623

다음 포스트

20220624

코딩일지

1) 학습한 내용

React

리액트 개념 및 장점

리액트의 장,단점

장점

단점