reactJS 시작하기

참고 : https://react-anyone.vlpt.us/03.html

참고 책 : 리액트를 다루는 기술

리액트란

  • 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리
  • 페이스북 개발 팀이 최대한 성능을 아끼고 편안한 유저 경험을 제공하면서 구현하려고 개발한 것.
  • 오직 View만 신경쓰는 라이브러리
  • 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트 라 함.

리액트 특징

DOM

Document Object Model의 약어. 즉, 객체로 문서 구조를 표현하는 방법

  • XML, HTML로 작성
  • 웹 브라우저는 DOM을 확용해 객체에 자바스크립트와 CSS를 적용함.
  • DOM은 트리 형태라서 특정 node를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

단점

  • 동적 UI에 최적화되어 있지 않다.
  • 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근해 변화를 주면 성능 이슈가 발생
  • DOM 자체는 빠르나, DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는데 느려지게 됨.

해결법

  • DOM을 조작할 때 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 잦으면 성능이 느려짐.
  • 최소한으로 DOM을 조작하여 작업을 처리해야함.
  • 리액트는 Virtual DOM 방식을 사용해 DOM 업데이트를 추상화해 처리 횟수를 최소화.

Virtual DOM

  • 리액트의 주요 특징이다.
  • 실제 DOM을 조작하는게 아니라, 이를 추상화한 자바스크립트 객체를 구성하여 사용함.
  • 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축에 효율적
  • 업데이트 처리 간결성에 효율적.
  • 매우 간단한 작업은 오히려 react를 안사용하는 것이 더 나은 성능을 보이기도 함.

기본 프로젝트 생성

$ npx create-react-app
$ npm start // or yarn start

기본 코드 구성

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

JSX

HTML 과 비슷한 문법으로 작성을 하면 이를 React.createElement 를 사용하는 자바스크립트 형태로 변환시켜준다.

몇가지 중요한 규칙이 있다.

태그가 꼭 닫혀야한다.

input 이나 br 태그를 사용할 때 안닫을 때도 있는데, JSX에서는 꼭 닫아줘야한다.

두개 이상 엘리먼트

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.

조건부 렌더링

보통 삼항 연산자를 사용하거나, AND 연산자를 사용해야한다.

if문은 사용할 수 없다. 사용하려면 IIFE(즉시 실행 함수 표현) 을 사용해야한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div></div>);
            if (value === 3) return (<div></div>);
          })()
        }
      </div>
    );
  }
}

export default App;a
김땡땡's blog

김땡땡's blog

김땡땡