(4) Eclipse 프로젝트에서 React 사용하기 - 1
Eclipse 에서도 리액트 어플리케이션을 만들 수 있습니다.
template를 만들면서 알아봅시다
1) 라이브러리 지정(cdn방식으로 추가합니다.)
- (react(컴포넌트)
- react-dom(화면출력)
- babel 필요(es6 언어를 지원해주는 라이브러리사용)
2) 화면디자인 내용(컴포넌트)를 배치할 div를 선언합니다.
public/index.html 에 출력할겁니다.
3) 화면디자인(컴포넌트를 생성->등록) type="text/babel"
text/babel 입니다. text/javascript가 아니에요! es6를 사용하기 위해서 babel을 사용합니다.
적용해봅시다 1.reacttemplate.html
<script src="https://unpkg.com/react@15/dist/react.min.js"></script> <!--react -->
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <!-- react-dom -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script> <!-- babel -->
</head>
<body>
<div id="root"></div>
//화면구현을 위해 react-dom 이 필요합니다.
<script type="text/babel"> // text/javascript가 아니에요 babel입니다.
ReactDOM.render(<h1>Hello,React!!</h1>, document.getElementById('root'))
</script>
</body>
</html>(5) Eclipse 프로젝트에서 React 사용하기 - 2
함수를 통해서 컴포넌트의 정보를 리턴 받고, 그걸 변수에 담아 뿌려줄거에요
1) root 경로(div의 Id로)를 지정
const root = document.querySelector('#id)'
: getElementById 와 같은 기능입니다.
2) 변수에 함수를 통해서 받은 내용을 저장이 가능합니다.
const msg = getGreeting()
3) 그 변수를 ReactDOM의 render 함수를 통해서 지정한 위치에 뿌려줍니다.
ReactDOM.render(msg,root) (전달할 개체, 보여줄 위치)
적용해봅시다 2.greeting.html (body부분만 보여드립니다. cdn 첨부는 당연히합니다.)
<div id="disp"></div>
<!-- javascript에서 아래처렴 표현된 부분이 이 div 에 표시될겁니다
ReactDOM.render(<h1>Hello,React!!!!</h1>,document.getElementById('disp'))
-->
<script type="text/babel">
const root=document.querySelector('#disp')
const msg=getGreeting() //함수를 통해서 컴포넌트의 정보리턴 받음
ReactDOM.render(msg,root)
function getGreeting(){
const r=Math.floor(Math.random()*3)//소수점->정수로 변환
if(r==0) return <h1>오늘도 즐거운 하루 되세요</h1>
if(r==1) return <h1>안녕하세요 리액트!!!</h1>
if(r==2) return <h1>오늘 날씨 참 덥다.</h1>
}
</script>(6) Eclipse 프로젝트에서 React 사용하기 - 3
jsx 를 한 번 더 짚어봅니다.
변수선언할 때에는 const, let ,var
js에서 변수를 출력할 떄는 { } 중괄호를 사용합니다.
적용해봅시다 3.react-jsx.html
<body>
<div id="root"></div>
<script type="text/babel">
const item = "SD카드";
const value = 12000
const title ="서예";
const imgUrl = "http://uta.pw/shodou/img/28/214.png";
// { 변수명 } 으로 선언된 변수들을 담아서 표현할 수 있습니다.
// root로 msg의 html을 포함한 문구들이 리턴되면서, { } 문법이 적용되고
// 해당 변수의 값들이 표시됩니다.
const msg = <div>
<h1>{item}-{value}</h1>
<h1>{title}</h1>
<p><img src={imgUrl}/></p>
</div>
const elm = document.getElementById('root')
ReactDOM.render(msg,elm)
</script>
</body>(7) Eclipse 프로젝트에서 React 사용하기 - 4
css 에 적용될 내용을 변수에 담아서 적용시켜봅니다.
적용해봅시다 4.react-class.html
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(getDOM(),document.getElementById('root'))
function getDOM(){
// 각 변수에 css 설정을 담아둡니다.
const css1={
'color' : '#f00',
'background-color' : '#f0f0ff',
'font-size' : '2em'
}
const css2={
'color' : '#00f',
'background-color' : '#fff0ff',
'font-size' : '2em'
}
/*return 하는 html 구조에 style의 속성에 변수에 담긴
css 속성을 적용하기 위해 {변수} 로 담아줍니다.*/
return(
<div>
<p style={css1}>React의 구조와 작성법</p>
<p style={css2}>React의 JSX 사용법(변수, 이벤트처리, 스타일 적용, 주석)</p>
</div>
)
}
</script>
</body>
웹프로그래밍 공부를 시작한 패션디자이너 출신 웹린이