[React] React.js 기초와 출력해보기

 개념

 

 

www.jetbrains.com/ko-kr/webstorm/

WebStorm: JetBrains가 만든 스마트한 JavaScript IDE

↑↑↑↑↑↑↑↑

WebStorm 설치

 

 

# React (리액트 )
 - 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 
 - 사용자의 View 에만 초점을 맞춤 →  Routing 같은 기술이 리액트 자체에는 들어가 있지 않음

 

 

 

# React 특징

 1. JSX 문법 : JavaScript + XML
 2. Component 기반 
 3. Virtual DOM

장점	- virtual DOM을 사용   - 배우기에 간단하다 =>  복잡함이 별로 없음   - 뛰어난 Garbage Collection 메모리 관리 성능   - 서버 사이드, 클라이언트 사이드 랜더링을 둘다 지원   - 서버 랜더링을 제공 → 유저가 더 쾌적하게 이용 가능(서버사이드 랜더링 이후에 클라이언트 사이드 랜더링이 실행됨)     - 서버 랜더링은 검색 엔진 최적화를 할 수 있다.    - UI를 간편하게 사용, UI를 컴포넌트화 하여 효율적으로 재사용 가능
단점	- 다른 라이브러리나 프레임워크와 혼용이 가능(Angularjs, JQuery 가능) - 이미 개발이 완료된 서비스에도 사용 가능하다는 것    - view only, 보여주는 부분만 관여하기 떄문에 데이터 모델링, Ajax, 라우터 등의 기능이 없다.    => 빠진 부분은 다른 라이브러리 사용하여 구현해야 함  - 익스플로러 8이하 버전은 지원 안함

 

# React 동작 순서

1. 생성 constructor() →변수 선언, 이벤트 등록
    react에서 사용하는 변수
     = props : 변경이 안되는 변수
     = state : 변경이 되는 변수
     = ref : input 참조
2. 렌더전 componentWillMount()
    외부서버에서 데이터를 가지고 올때 사용 (nodejs.spring)
3. 렌더 render()
──────────────── 화면
4. 렌더후 → 브라우저 실행 → Jquery 연동
   ComponentDidMound() → window.onload
   $(function(){<- ->})

 

 

 예제

[File] - [New] - [Poject] 프로젝트 생성

[React App]에서 저는 경로설정 저렇게 했슴돠

 

 

 

버전 변경해줌

 

 

 

[Settinggs] - [Tools] - [WebBrowsers] 

기본브라우저 Chrome으로 변경 (생략해도 무방) 

 

 

 

 

# App3.js

import React,{Component} from 'react'
 
class App3 extends Component{
    constructor(props) {
        super(props);
        console.log("constructor Call...");
    }
    componentWillMount() {
        console.log("componentWillMount() Call")
    }
    componentDidMount() {
        console.log("componentDidMount() Call")
    }
    render() {
       
        console.log("render() Call...");
        // index.js => <App3/>
        const html=this.props.data.map(m=>
            <li>{m.name}-{m.sex}</li>
        )
        return (
            <div>
                <h1>정보</h1>
                <ul>
                    {html}
                </ul>
            </div>
        )
    }
}
export default App3;

  - return안에는 무족권 html태그만 들어감 (주석도 걸면 안됨!!)

  - 계층구조를 만들어야 오류가 없음

  - index.js의 정보 값을 불러옴

 

 

 

# index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App3 from './App3';
import reportWebVitals from './reportWebVitals';
// App3(String name,String sex, String tel)
// new App3("","","")
// <App3>
const info=[{name:"홍길동",sex:"남자"},
            {name:"심청이",sex:"여자"},
            {name:"박문수",sex:"남자"}];
 
ReactDOM.render(
  <React.StrictMode>
    <App3 data={info}/>
  </React.StrictMode>,
  document.getElementById('root')
);
 
reportWebVitals();

 - App3.js에 값을 넣어주는 코드

 

 

 

 # 실행

 

 

 

# 출력 화면