React 시작하기

Front End 라이브러리란?

웹 돔 관리와 상태값 업데이트 관리를 최소한으로 하고 오직 기능기반 사용자 인터페이스에 집중할 수 있도록 그동안 많은 front end 라이브러리나 프레임워크가 만들어졌다. (react, angular, vue 등..)

 

3대장 프레임워크 소개

Angular

다양한 기능들이 내장되어 있음. ex ) http client, router, 다국어지원
공식 라이브러리도 지원, 현재는 많은 기업들이 사용하고 있음.

Angular2부터 Typesciprt를 표준으로 사용하고 있음

 

React

Component에 집중된 프레임워크가 아닌 라이브러리임. 
페이스북에서 나옴, 앵귤러와 달리 View만 신경씀.
다양한 써드파티 라이브러리들이 있음. (공식 라이브러리 없음.)

사용하는 기업이 많다.
Airbnb, BBCm cloudflare FACEBOOK 등..
2017년 기준 가장 많이 사용하는 라이브러리다.

 

Vue 

입문자가 사용하기 쉬운 언어.
공식 라우터, 상태관리 라이브러리가 있음.
Angular, React의 장점을 차용함.

 

React Virtual DOM

변화가 생길때마다 DOM을 변경하려면 많은 시간과 리소스를 잡아먹을 것이다.
이러한 문제를 해결하기 위해 React는 가상 돔이란 기술을 사용한다. 

가상돔은 간단한 사본과 같은 돔 객체를 나타낸다.
이는 기존돔과 가상돔을 비교를 통해 바뀌는 부분만 찾아 변경하도록 한다.

https://www.youtube.com/watch?v=muc2ZF0QIO4&feature=youtu.be

 

 

리액트 프로젝트 시작하기

 

Webpack

여러 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러 모듈로 만들어줌
여러 파일의 Javascript 코드를 하나로 묶어줌 (설정을 통해 여러개로 나눌 수도 잇음.) 

Babel

javascript compiler
https://babeljs.io/

Babel · The compiler for next generation JavaScript

Babel은 ECMAScript 2015+이상 버전의 코드를 이전 버전의 javascript로 변환하여 오래된 브라우저(IE, 옛날 크롬 등)에서 호환이 가능하도록 함.

 

실습 진행하기

 

CODE SANDBOX
https://codesandbox.io/index2

CodeSandbox: Online IDE for Rapid Web Development

React 뿐만아니라, 다양한 javascript 프레임워크를 간단하게 온라인에서 실행해 볼 수 있는 사이트

 

 

예제코드

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

javascript 코드 안에 html 태그가 있음 -> jsx코드

 

JSX

태그를 열고 닫지 않으면 오류가남.

 <input type="text"> //오류발생
 //Unterminated JSX contents

 

두개이상의 앨리먼트는 하나의 앨리먼트로 감싸야함.

 <div>
        Hello
      </div>
      <div>
        Bye
      </div> //오류발생
      //Adjacent JSX elements must be wrapped in an enclosing tag

 

JSX안에서 자바스크립트 값 사용

class App extends Component {
  render() {
    const name = "react";
    return (
    <div> hello {name}</div>
    );
  }
}

 

var vs const vs let 타입 비교

var : ES6에서 더이상 사용하지 않음 (scope 함수단위)
const : 한번 선언 후 고정(scope 블록단위)
let : 유동적인 값(scope 블록단위)

 

조건부 랜더링

class App extends Component {
  render() {
    const value = 2;

    return ( 
      <div>{
        (() => {
          if(value === 1 ) return <div>1이다.</div>;
          if(value === 2 ) return <div>2이다.</div>;
          if(value === 3 ) return <div>3이다.</div>;
         return  <div>예외.</div>;
        })()
      }</div>
    );
  }
}

 

Style과 ClassName

스타일을 객체 형태로 작성해줌
쿨래스를 설정할 때는 html에서 사용했던 class란 속성 이름이 아닌 className을 사용(class라고 해도 동작은 함.)

class App extends Component {
  render() {
    const style = {
      bacgroundColor: 'black',
      padding : '16px',
      color : 'red',
      fontSize : '36px'
    };

    return ( 
      <div style={style}> 안녕하세요! </div>
    );
  }
}

 

주석

class App extends Component {
  render() {
    return ( 
      <div
        something = "test" // 속성에 대한 설명 주석 
       > 
        {/* 주석입니다. */}
        리액트 
      </div>
    );
  }
}

 

 

 

이글은 아래 강의를 보고 간단히 정리한 글입니다.
강의를 수강하시면 보다 상세한 정보를 얻으실 수 있습니다. 

참조 : 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - velopert(김 민준) (인프런)
참고문서 : https://react-anyone.vlpt.us/03.html