[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 사용

4. JSX

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

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

''+

'' 식을 거치지만 JSX에서는

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

4-1 주석

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

4-2 위젯 생성

- 단순 버튼 생성

render() {

return(

);

}

- js를 통한 생성

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

const listinputTag = btnArr . map ( item => < input type = "button" style = { btnStyle } value = { item + 1 } key = { item + 1 } > );

render(){

return(

{listinputTag}

);

}

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

App.js

< div className = "react-CSS" > 여기는 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 에 있는 에 붙는 것으로 보입니다.

결과 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 => ); const listbuttonTag = btnArr.map(item=> {item+1} ); // [...new Array(10)].map(x => 0); const btnCnt = 3; const countBtn = Array(btnCnt).fill(null).map( (i,idx) =>{ let btnKey = "Count_"+idx; return Cnt_{idx} } ); return ( { isButton ? '버튼이 있다': '버튼이없다'} { isButton && '버튼이 있다'} {/* 버튼이 있기 때문에 해당 버튼을 생성 btnCnt만큼 */} 'map 을 통하여 버튼 렌더링 input 태그 btnArr=[1,2,3];' {listinputTag} 'map 을 통하여 버튼 렌더링 button 태그 btnArr=[1,2,3];' {listbuttonTag} count 변수를 통하여 버튼 렌더링 button 태그 현재 cnt : {btnCnt} {countBtn} 여기는 div입니다. ); } } export default App;

from http://ipex.tistory.com/175 by ccl(S) rewrite - 2020-03-06 12:20:41