StoryCode

'ReAct, 리액트'에 해당되는 글 1건

  1. 사용법

사용법

ReAct, 리액트
반응형

참고자료 : https://velopert.com/3612

 

 

프론트 엔드 프레임 워크 설명
1. React UI 를 구현하게 되면서, 앵귤러만의 문법같은 것들이 다양하게 존재합니다. 특정 기능을 구현 할 때, 편리하게 대신 해주는 것들이 많습니다. 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있습니다. 앵귤러1의 경우 만들어진지 꽤 오래 됐고, 기업에서 많이 사용이 돼서, 유지보수하고 있는 프로젝트가 많아서 사용률이 높은 편입니다. 앵귤러2의 경우 매우 성숙하긴 하지만, 인지도 측면에선 아직 성장하는 단계이며, 주로 타입스크립트랑 함께 사용됩니다.
2. Angular “컴포넌트” 라는 개념에 집중이 되어있는 라이브러리입니다. 컴포넌트는 우리가 추후 더 자세히 배워보겠지만, 미리 간단히 설명하자면, 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줍니다. 페이스북 개발자들이 라이브러리의 성능과 개발자 경험을 개선하기 위해 많은 연구를 합니다. 리액트를 한번 해본 개발자들은 대부분 맘에 들어합니다. 생태계가 엄청 넓고, 사용하는 곳도 많습니다. HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어있지 않습니다. 따로 공식 라이브러리가 있는 것도 아니여서, 개발자가 원하는 스택을 맘대로 골라서 사용 할 수 있습니다 (혹은 직접 라이브러리를 만들어서 쓸 수도 있겠죠.)
3. Vue 입문자가 사용하기에, 정말 쉽습니다. 대부분 Webpack 같은 모듈 번들러를 사용하여 프로젝트를 구성해야하는 앵귤러와 리액트와 달리, 단순히 CDN 에 있는 파일을 로딩 하는 형태로 스크립트를 불러와서 사용하기도 편합니다. HTML 을 템플릿처럼 그대로 사용 할 수도 있어서 마크업을 만들어주는 디자이너/퍼블리셔가 있는 경우 작업 흐름이 매우 매끄럽습니다. 공식 라우터, 상태관리 라이브러리가 존재합니다.

 

동작방식

Virtual DOM 의 변화가 일어나면 화면에도 변화가 일어난다.

"Javascript based Virtual DOM" 으로 렌더링 => 실제 DOM 비교 => 필요한 곳 업데이트

( 실제 DOM 을 재 작성하면 부하가 너무 크다. )

 

골자) 변화된 최종본을 React에 넘기면 React 가 변화를 감지하여 실제 화면에 반영한다. 

https://www.youtube.com/watch?v=muc2ZF0QIO4

 

 

설치 필요한 도구 설명
Node

Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있습니다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js 를 설치합니다.

v8

Homebrew

( 맥 사용자 )

윈도우 사용불가하며, Scoop 패키지를 사용하면 Yarn 설치가 가능.

애플에서 제공하지 않는 유용한 패키지를 설치할 때 사용되는 패키지 관리자이다. 간혹 NPM으로 리액트 & 리액트 네이티브 관련 외부 패키지를 설치할 때 문제가 발생될 수 있다. 이때는 NPM 대신 Yarn 패키지를 사용하는 것을 권장한다.
Yarn ( 맥 사용자 )

Yarn은 페이스북에서 만든 새로운 자바스크립트 패키지 매니저이다. 이미 거대화된 NPM보다 속도 측면에서 빠르다는 장점이 있다. Yarn은 Homebrew로 설치할 수 있다. ( 필자의 경우 Yarn으로 리액트와 리액트 네이티브 외부 패키지를 설치하고 있다. )

 

Yarn 은 조금 개선된 버전의 npm 이라고 생각하시면 됩니다. npm 은 Node.js 를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구입니다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전 관리를 하게 될 때 사용하죠. 우리가 Yarn 을 사용하는 이유는, 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위함입니다.
Webpack

리액트 프로젝트는 컴포넌트를 여러가지 파일로 분리해서 저장하며, 이 컴포넌트는 일반 자바스크립트가 아닌 JSX 라는 문법으로 작성한다.

이 여러가지 파일을 한개로 결합하기 위해서 우리는 Webpack 이라도 도구를 사용한다.
Babel JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서는 Babel 이라는 도구를 사용한다.

 

리액트 컴퍼넌트 구조

( 아래 그림과 같음 )

 설명
index.html

<div id="root"></div>
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
App.js

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;

 

클래스의 정의 및 Call 설명

정의

 import React, { Component } from 'react';

class MyName extends Component {
  render() {
    return (
        안녕하세요! 제 이름은 {this.props.name} 입니다. 
    );
  }
}

export default MyName;

Call

 import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
  render() {
    return (
       <MyName name="리액트" />
    );
  }
}

export default App;

 

변수의 종류

 설명
props

부모에서 보낸 파라미터를 자식이 아규먼트로 액세스할 경우.

{this.props.파라미터}
state

 
반응형
,

티스토리툴바