티스토리 뷰
JSX
리액트컴포넌트를 생성할때 사용
HTML과 비슷 { }문법을 사용
const name = "name";
<div>
hello {name}
</div>
반드시 태그를 닫아줘야한다
<input type="text"> 이런식으로 닫아주지않으면 error 발생
<input type="text" /> 이런식으로 닫아줘야한다
반드시 하나의 태그만 return해야한다
render(){
return {
<div>
</div>
<div>
</div>
}
}
위와같이 2개의 태그를 return할수없다
2개의 태그를 return시 하나의 태그로 묶어줘야한다
<div>
<div></div>
<div></div>
</div>
Fragment
import React, { Component, Fragment } from 'react';
return {
<Fragment>
<div> </div>
<div> </div>
</Fragment>
}
위와 같이 Fragment를 import해주면 Fragement를 사용할수있다
감싸기위해 div를 사용하는것이 맘에들지않으면 사용하지만 왠만하면 추천하지않는다
조건문 사용하기
render() {
return {
<div>
{
1 + 1 === 2 ? <div>정답</div> : <div>아니다</div>
}
}
}
JSX에서는 if를 사용할수없어서 위와같이 삼항연산자를 이용하거나
<div>
{
1 + 1 === 2 && <div>정답</div>
}
위와 같이 &&를 이용하여 if문을 사용할수있다
<div>
{
( () => {
if( (1+1) === 2)
return <div>정답</div>
})()
}
위와 같이 함수를 만들어서 바로 실행시켜 사용할수도있다
Style, Class 적용방법
html 에서 style 적용방법은 <div style="display: none;"> </div> 과 같이하였지만
JSX는 객체로 style을 받는다
const style = {
backgroundColor: 'red',
fontSize: '16px'
}
font-size == fontSize backgroundColor == background-color
카멜케이스로 변경한다
<div style={style} > </div> 이와같이 적용할수있다
따로 css파일을 가져와서 적용하고싶다면
import './App.css'
<div className="App"> </div> 와같이 적용할수있다 className == class
위의 className을 class로 변경하여도 적용이되지만 그래도 className을 쓰는걸 추천한다
주석
자바스크립트 쓰듯이 // /* */ 주석을 사용하면 그대로 렌더링 되버린다
<div> // 테스트 </div>
주석 앞에 { } 를 달으면 주석이 적용된다
<div> { // 테스트 } </div>
또한 태그안에도 주석을 사용할수있다
<div
style={style} // 테스트
>
위 방법은 주로 어떤 속성에대한 주석을 달때 사용하거나 리액트 컴포넌트에 대한 설명을 작성할때 사용