리액트에서는 딱 하나의 html 파일만 존재합니다.
JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그립니다.
HTML을 품은 JS === JSX!
<input type='text'> => <input type='text'/>
태그를 항상 닫아줘야한다 하지만 하나의 태그에 마지막에 /를 쓴다면 닫는효과랑 같다.
return (
<p>안녕하세요! 리액트 반입니다 :)</p>
<div className="App">
<input type='text'/>
</div>
);
위처럼 하면 에러가난다 이유는 컴포넌트에서 반환할 수있는 엘리먼트는 1개이기 때문이다.
그러기 때문에 div 태그안에 다 넣어주거나
<> ,</> 이 태그 안에 다 넣어주어도 된다.
const cat_name = 'perl';
//
return (
<div>
hello {cat_name}!
</div>
);
js 값을 가져오려면 중괄호를 쓰면된다. 이외에도 map 삼항연산자 등 JS를 쓰려면 중괄호 안에서 쓸수 있다.
<div className="App">
클래스는 class가아니라 className으로 정해준다
id는 id 이다.
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
css도 중괄호 2번을 해줘야한다.
function App() {
const styles = {
color: 'orange',
fontSize: '20px'
};
return (
<div className="App">
<p style={styles}>orange</p>
</div>
);
}
아님 이런식으로 쓴다.