안녕하세요
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를 통한 생성
render(){
return(
<Fragment>
{listinputTag}
</Fragment>
);
}
- CSS 속성 입히기 (외부 스타일)
App.js
App.css
- CSS 속성 입히기 (인라인 스타일)
App.js
index.js (ReactDOM.render)
ReactDOM.render : 리액트 돔 말그대로 React코드를 DOM (Document Object Model) 에 붙이는 역할을 합니다.
다른 의미로 IOS나 AOS같은 모바일에 붙이는 경우는 ReactNative.render(?) 가 있었던것처럼
화면구성은 React + Component 로 구성하고 붙이는 지점은 브라우저냐 모바일이냐 에 따라서
ReactDOM 이냐 ReactNative로 갈리는 것 같습니다. 완전한 분리 좋네요
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;
'개발일지(Platform & Library) > React' 카테고리의 다른 글
| [React] 리액트 컴포넌트 정리 (Component) (0) | 2018.08.20 |
|---|---|
| [React] 시작 전 준비 단계 트러블 슈팅 (Trouble Shooting) (0) | 2018.08.07 |
| [React] 시작 전 준비 2단계( 리액트 코드 index.js) (0) | 2018.08.05 |
| [React] 시작 전 준비 1단계( 리액트 코드 ) (0) | 2018.08.05 |
| [React] 시작 전 준비 (0) | 2018.08.03 |
해당 입력이 위와같이 변함을 확인 할 수 있다. 
