React #2 리액트.JS

React.js 는 페이스북에서 만든 자바스크립트 라이브러리입니다.

가장 큰 특징으로 JSX (자바스크립트 코드에 HTML을 바로 쓰는 확장문법)과 가상 DOM의 사용입니다.

 

가상 DOM이란?

 

#1. React는 컴포넌트 기반이다.

보통 클라이언트 도구의 경우 Controller, Model, View model, Template...등으로 나누어져 있는 경우가 많습니다.

하지만 리액트의 모든 것은 Component 기반으로 동작합니다.

참고로 리액트는 View만 담당하는 라이브러리이며, 서버 사이드 / 클라이언트 사이드 렌더링을 둘 다 지원합니다.

---

#2 import react , reactDOM

기존에는 라이브러리 한 개만 불러오면 되었으나

최신버전의 리액트는 라이브러리(react) 와 렌더링(reactDOM) 부분이 나누어져 각각 import 해야합니다.

참고로 웹사이트가 아닌 모바일 앱에 리액트를 적용하고 싶다면, reactDOM 대신 reactNative를 쓰면 됩니다.

---

#3. JSX 확장문법

리액트를 사용할 때는 JSX를 이용하여 HTML을 자바스크립트에 바로 쓸 수 있습니다.

이 코드가 바로 실행되는 건 아니고, JSX로 작성된 코드는 Babel을 통해 기존의 자바스크립트 코드로 변환됩니다.

var a =(
    <div>
        반갑습니다 <b> React에 오신것을 환영합니다. </b>
    </div>
);

이 코드는 Babel에서 아래와 같이 리액트 라이브러리를 사용한 코드로 변환됩니다.

"use strict":

var a = React.createElement(
    "div",
    null,
    "반갑습니다",
    React.createElement(
        "b",
        null,
        "React에 오신것을 환영합니다."
    )
);

---

#3-1 Hello React!

실행결과 : 안녕하세요

<div id="root"> </div>

// 1. 라이브러리를 불러옵니다.
import React from 'react'; // 리액트 라이브러리
import ReactDOM from 'react-dom'; // 리액트 Rendering 라이브러리

// 2. 컴포넌트를 생성합니다.
/*
	이렇게 한 파일안에 컴포넌트를 다 적어도 되지만
    보통은 컴포넌트별로 파일을 나눈 후, 각 파일에 export하여
    index.js 에서 import로 사용하는 컴포넌트를 불러옵니다.
*/
class Hello extends React.Component{
    render() {
        return (
            <div>
                안녕하세요
            </div>
        );
    }
}

// 3. 한번 만든 컴포넌트 객체는 JSX 문법 <Class/> 로 불러올 수 있습니다.
class App extends React.Component{
    render() {
        return(
            <Hello/>
        );
    }
}

// 4. 내가 만든 컴포넌트를 원하는 요소에 렌더링합니다. (이는 가상 DOM입니다.)
ReactDOM.render(<App/>.document.getElementById('root'));

---

#3-2 기본 개념

1. Nested Element

하나의 리액트 컴포넌트는 하나의 요소만 가질 수 있습니다.

여러개가 필요하다면 컨테이너를 만들어 감싸주어야 합니다

아래 코드는 에러를 발생시킵니다.

// 에러! 컴포넌트에 2개의 요소가 들어감.
class Hello extends React.Component{
    render() {
        return (
            <h1>한개 등록</h1>
            <h1>두개 등록</h1>
        );
    }
}

// 이렇게 사용해야 합니다.
class Hello extends React.Component{
    render() {
        return (
            <div>
                <h1>한개 등록</h1>
                <h1>두개 등록</h1>
            </div>
        );
    }
}

 

참고로 주석 또한 컨테이너 안에 작성되어야 합니다.

class Hello extends React.Component{
    render() {
        return(
            <div> 
                {/* 주석도 이렇게 작성합니다 */}
                <h1> 안녕하세요 </h1>
                {/* 주석도 JS 기능이니까 {~} 안에 적어주세요. */}
            </div>
        )
    }
}

---

2. JavaScript 사용하기

자바스크립트를 사용하고 싶다면 render() 함수 안에 변수를 선언하고, return 안에서 브라켓 { } 으로 사용하면 됩니다.

class Hello extends React.Component{
    render() {
        let text = "Hello React"
        return (
            <div> 이건 {text} 변수 입니다. </div>
        );
    }
}

다만 if, else문은 지원하지 않습니다. 꼭 사용이 필요하다면 삼항연산자( conditon ? true : false )로 구현 가능합니다.

<div> { 3 > 1 ? 'True' : 'False'} </div>

---

3. Inline Style 지정하기

key:value 로 이루어진 객체를 만들고, html style 요소에 속성으로 넣어주면 됩니다.

다만 JSX에서 스타일을 설정할 때 key는 string 형식을 사용하지 않고 key가 camelCase인 객체가 사용됩니다.

class Hello extends React.Component{
    render() {
        let myStyle = {
            color:'red',
            backgroundColor:'black'
        };
        
        return(
            <div style={myStyle}> 스타일이 지정된 텍스트 </div>    
        )
    }
}

 

참고로  JSX에서 class를 설정 할 때는, 자바스크립트와 키워드 충돌을 피하기 위해 className ="" 으로 사용합니다.

<div className="box"> 
	자바스크립트 키워드와 충돌을 피하기위해서 class -> className
</div>