JSX 훑어보기
November 10, 2019
JSX
JavaScript XML의 약자
Javascript에서 사용하는 HTML과 비슷하다.
특징
- 태그 이름은 기존
HTML과 거의 유사하다. - Attributes나 css는 카멜 케이스를 사용한다. (
className,textAlign) Javascript코드를 활용하기 위해서는{ }를 이용한다.
JSX 사용해보기
이전과 동일하게 아래의 명령어를 사용해 React앱을 생성해줍니다.
npx create-react-app my-app앱 생성이 완료되었다면 App.js파일을 아래와 같이 수정합니다.
import React from 'react'
import './App.css'
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
<h2>ReactJS ...</h2>
</div>
)
}
export default Apph1 태그에 스타일 입혀보기
App.js에서 App함수를 아래와 같이 수정한다.
function App() {
return (
<div className="App">
<h1 style={{ color: 'red' }}>Hello World!</h1>
<h2>ReactJS ...</h2>
</div>
)
}style={{...}}에서 첫번째 중괄호는 JS코드가 들어간 다는 것을 의미를 갖고
그 안에있는 { color: "red }는 하나의 스타일 정보를 가지고 있는 Object다.
위와 같이 스타일이 잘 적용된 것을 확인할 수 있게되었다.
아래 처럼 직접 넣지 않고 밖에서 코드를 작성하여 넣을 수도 있다.
...
const headerStyle = {
color: "red",
};
function App() {
return (
<div className="App">
<h1 style={headerStyle}>Hello World!</h1>
<h2>ReactJS ...</h2>
</div>
);
}
...css에서의 font-weight과 같은 속성을 주기위해서는 카멜 케이스를 사용한다.
...
const headerStyle = {
color: "red",
fontWeight: 800
};
...
우리가 의도한 스타일이 잘 적용되었음을 개발자 도구로 확인할 수 있다.
h2태그에 클래스 지정해보기
위의 방식과 같이 style속성만 이용하다보면 코드가 복잡해질 가능성이 있다.
따라서 기존의 HTML에서 사용했던 방법과 동일하게 클래스를 사용할 수 있다.
function App() {
return (
<div className="App">
<h1 style={headerStyle}>Hello World!</h1>
<h2 className={'titleStyle'}>ReactJS ...</h2>
</div>
)
}위와 같이 className이라는 속성을 주어 클래스를 지정할 수 있다.
클래스가 잘 지정되었는지 App.css에 아래의 코드를 추가한 후 새로고침 해보자.
.titleStyle {
color: white;
background-color: black;
}
우리가 지정한 titleStyle클래스에 css가 잘 적용된 것을 확인할 수 있다.
