[React] 시작 전 준비 마지막 및 정리 ( JSX , ReactDOM.render )

안녕하세요

React 시작 전 준비 단계 3번째 입니다.  JSX  , 그리고 ReactDOM.render 및 제가 사용하면서 궁금했던 것들에 대해

그리고 이제까지 1,2단계에서 봤던 것들 정리 차원입니다.

리액트 시작 전 리스트 체크 

1. 준비물 챙겼는지?

IDE - vscode (관련 플러그인, ESLint, Guides)

Node.js 설치 

CRA(create-react-app) 설치 

create-react-app 설치 후 

> 1. create-react-app basic-react

> 2. cd basic-react 

> 3. npm start

> 짜잔. Hello React

github(깃허브)

JS,HTML5,CSS3

> ES6 

이외 사용 도구들 (시작하고 알아보기)

> webpack,babel ... 

2. 리액트는 왜하는건지?

노마드 코더의 말을 빌리자면 매우 멋진 UI 라이브러리이며 그냥 js만 잘하면 다 할수 있다. 모든 화면들을

컴포넌트화 하여서 쪼개서 사용이 가능하다 vue. angular는 그에 따른 문법을 배워야 하지만 리액트 는 그렇지 않다.

또한 리액트는 View만을 위한 라이브러리 이기 때문에 다른 프레임워크와 같이 사용이 가능 하다.

3. 리액트 (create-react-app)

3-1 모든 컴포넌트는 Component를 상속 받아야 한다.

class tempComponent extends Component

      3-2 모든 컴포넌트는 render () 함수가 있다.

render() {}

3-3 import React, { Component,Fragment } from 'react'; 는 필수

상속도 받고 render 부모로 Fragmnet 사용   <Fragment>

4. JSX

리액트에서 사용 되는 문법으로 마치 HTML 을 쓰는 것과 같지만 다른점이 하나있다.

기존 HTML에서는  여러 줄 입력시

'<button></button>'+

'<input></input>' 식을 거치지만 JSX에서는

<button></button>

<input></input> 와 같은 직접 HTML을 쓰는것 처럼 보이는 형태를 띄기 때문이다.

4-1    주석

주석은 단순하게 /* */ 가 아니라 { /* */ } 와 같이 작성한다.

4-2   위젯 생성

- 단순 버튼 생성

render() {

return(

<Fragment>

<button type="button" value="test"/>

</Fragment>

);

}

- js를 통한 생성 

const btnArr=["첫번째","두번째","세번째"];

const listinputTag = btnArr.map(item =>

<input type="button" style={btnStyle} value={item+1} key={item+1}></input>

);

render(){

return(

<Fragment>

{listinputTag}

</Fragment>

);

}

- CSS 속성 입히기 (외부 스타일)

App.js

<div className="react-CSS">

여기는 div입니다.

</div>

App.css

.react-CSS{

width:550px;

height:200px;

color:white;

background-color:black;

}

- CSS 속성 입히기 (인라인 스타일)

App.js

const btnStyle = {

backgroundColor:"#fafafa",

border : '1px solid #d3dbdf',

padding: '8px 13px 9px 15px',

margin:'0px 2px 0px 0px',

whiteSpace:'nowrap',

fontWeight:'600',

cursor:'pointer',

height: '50px',

width:'100px',

borderRadius:'3px',

WebkitTransition:'all',

MozTransition:'all',

msTransition:'all'

};

<button style={btnStyle} type="button" value="test"/>

index.js  (ReactDOM.render)

ReactDOM.render : 리액트 돔 말그대로 React코드를 DOM (Document Object Model) 에 붙이는 역할을 합니다.

다른 의미로 IOS나 AOS같은 모바일에 붙이는 경우는 ReactNative.render(?) 가 있었던것처럼

화면구성은 React + Component 로 구성하고 붙이는 지점은 브라우저냐 모바일이냐 에 따라서

ReactDOM 이냐 ReactNative로 갈리는 것 같습니다. 완전한 분리 좋네요

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();

ReactDOM.render(만든컴포넌트, document.getElementById('root'))로 되어있는데

root는 어디있을까 했더니 public 폴더에 index.html 에 있는 <div id="root"> 에 붙는 것으로 보입니다.

결과 App.js

import React, { Component, Fragment} from 'react';

import './App.css';
// [React] 시작 전 준비 3단계( JSX && 스타일)
class App extends Component {

  render() {
    const isButton = true;
    const btnArr=["첫번째","두번째","세번째"];
    const btnStyle = {
        backgroundColor:"#fafafa",
        border : '1px solid #d3dbdf',
        padding: '8px 13px 9px 15px',
        margin:'0px 2px 0px 0px',
        whiteSpace:'nowrap',
        fontWeight:'600',
        cursor:'pointer',
        height: '50px',
        width:'100px',
        borderRadius:'3px',
        WebkitTransition:'all',
        MozTransition:'all',
        msTransition:'all'
    };
    const listinputTag =  btnArr.map(item =>
      <input type="button" style={btnStyle} value={item+1} key={item+1}></input>
    );
    const listbuttonTag = btnArr.map(item=>
        <button type="button" style={btnStyle} key={item+1} >  {item+1} </button>
    );
    // [...new Array(10)].map(x => 0);
    const btnCnt = 3;
    const countBtn = Array(btnCnt).fill(null).map( (i,idx) =>{
         let btnKey = "Count_"+idx;
         return <button style={btnStyle} type="button" key={btnKey}>Cnt_{idx}</button>
      }
    );
    return (
      <Fragment>
        <h2>
            { isButton ? '버튼이 있다': '버튼이없다'}
        </h2>
        <h2>
            { isButton && '버튼이 있다'}
        </h2>
            {/* 버튼이 있기 때문에 해당 버튼을 생성 btnCnt만큼 */}
            <button style={btnStyle} type="button" value="test"/>
        <h3> 'map 을 통하여 버튼 렌더링 input 태그 btnArr=[1,2,3];'</h3>
         {listinputTag}
        <h3> 'map 을 통하여 버튼 렌더링 button 태그 btnArr=[1,2,3];'</h3>
        {listbuttonTag}
        <h3> count 변수를 통하여 버튼 렌더링 button 태그  현재 cnt : {btnCnt}</h3>

        {countBtn}
        <div className="react-CSS">
                여기는 div입니다.
        </div>
      </Fragment>
    );
  }
}

export default App;