[React.js] React.js 3편 JSX2

React.js css사용해보기

---

이번에는 react.js를 통해 css효과를 줘보겠다. 

방법 1. 변수에 넣어서 사용하기 

render() {

const style = {

backgroundColor : "blue",

color :"white",

fontSize : "64px",

}

return <div style={style}>

hi i am React.Js

</div>

}

아래와 같이 reder안에 style이라는 변수를 선언해주고 변수안에 css정보를 json형태로 나타낸 후 저번시간에 배운 {}안에 변수를 넣어주면 실행이 된다. 

그리고 폰트사이즈와 같은 곳에는 숫자를 더해주며 값을 표현할 수 있다. 

방법 2. CSS파일에 넣어서 사용하기 

우선 사진과 같이 옆에 css파일을 하나 만들어줍니다. 

그런뒤 저파일안에 자기가 원하는 css정보를 입력합니다.  

return <div className="App">

hi i am React.Js

</div>

 원래html 소스에서는 class로 적어주지만 react에서는 className이라고 적어준다. 

주석하용하기

일반 자바스크립트에서는 //을 사용하여 주석을 다는건 일치하지만 어디에 다라주냐에 따라 주석이 렌더링 될 때도 있어서 확실히 알아야한다. 

return <div>

// one jusuk is visible But use

{

//hihihi

}

<h1

//add jusuk

className="App"//wecanDoit

>

hi i am React.Js

</h1>

</div>

일단 제일 첫번째 주석은 우리가 원치않게 출력되서 그냥 사용하면 안되는 것을 알 수 있다. 

방법1. 괄호 줄이 서로 다를 때 사용할 수 있다.

ex)

{

주석}

방법2.  태그 사이에 줄을 바꿔서 집어 넣을 수 있다. 태그안 속성뒤에도 넣을 수 있다.  

<h1 //주석

className ="App" //주석2> 

이런 방법으로 가능하다.