JSX에서 CSS스타일과 class를 사용하는 방법에 대해서 알아보자.
기본에 일반 html을 입력할 때는 문자열로 넣어주게 된다.
밑에는 class를 넣어주고 css를 통해 선언해서 색상은 초록색인 class를 적용해 주었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div style="background: blue; color: white; padding: 1rem">BLUE</div>
<div class="green">GREEN</div>
</body>
</html>.green {
background: green;
padding: 1rem;
color: white;
}
리액트에서는 어떻게 다를까?
일단은 스타일을 사용할 때 객체형태로 넣어준다. 그리고 Camelcase를 사용한다. 즉 새로운 단어가 시작될 때마다 대문자를 사용하는 것이다. 그리고 자바스크립트 상으로 스타일을 입력하는 거라서 js코드를 입력해도 된다.
아래 코드를 보자.
import React, { Component } from 'react';
class App extends Component {
render() {
const style = {
backgroundColor: 'black',
padding: '16px',
color: 'white',
fontSize: 5 + 10 + 'px'
};
return <div style={style}>안녕하세요!</div>;
}
}
export default App;
그리고 html에서는 div class = green식으로 클래스 이름을 넣어주었는데 리액트에서는 살짝 다르다.
class대신에 className을 사용한다.
return (
<div style={style} clasName="App">
안녕하세요!
</div>
App.css파일을 만들어주고 넣어주고 싶은 파일을 만든다.
결론은 class가 아니라 className이라고 적어야 한다는 것을 기억하자. class라고 입력해도 작동하긴 한다. 그래도 className이라고 사용하는게 올바른 네이밍컨벤션이기 때문에 이렇게 사용하자.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return <div className="App">리액트</div>;
}
}
export default App;
이번에는 주석을 작성하는 방법을 알아보자. 일반 div안에 h1을 작성해서 리액트라고 해보자. 그리고 괄호로 감싸서 여러줄로 보여지게끔 작성을 해본다. 일반적으로 자바스크립트에서 작성을 할 때는 //을 이용한다.
JSX에서는 //을 사용하면 렌더링 된다. 그리고 멀티라인도(/* */)예외가 아니다!
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div>
// 하이!
/*
멀티라인도 예외가 아니다!
*/
<h1>리액트</h1>
</div>
);
}
}
export default App;
그래서 중괄호 {}로 한 번 감싸줘야 한다. 이렇게 하는게 JSX내부에서 주석을 작성하는 방법이고
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div>
{/*
멀티라인도 예외가 아니다!
*/}
<h1>리액트</h1>
</div>
);
}
}
export default App;
가끔씩 컴포넌트 같은걸 선언하게 될 때 여러줄로 입력할 수 도 있다. 즉 h1밑에다가 //를 사용해서 주석을 사용할 수 있다. JSX코드 사이에도 주석을 남겨줄 수 있다. 즉 컴포넌트를 만들어서 something 어쩌고 저쩌고 주석을 남기고 싶다그러면 아래와 같이 하면 된다.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div>
{/*
멀티라인도 예외가 아니다!
*/}
<h1
something="asdasdasd" // 내가 여기에 주석을 쓸거야!
>리액트</h1>
</div>
);
}
}
export default App;
지금까지 App 컴포넌트만 봤는데 새로운 컴포넌트를 만들어보고 컴포넌트에 전달해주는 props와 내부적으로 들고있는 state에 대해서도 계속 알아보자.
<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>
https://www.inflearn.com/course/react-velopert/dashboard
누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의
리액트를 누구든지 쉽고 재밌게 시작 할 수 있도록 만들어진 강좌입니다., React 핵심 강좌 초심자를 위한 리액트(React) 핵심 강좌입니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔
www.inflearn.com
'React > velopert_react' 카테고리의 다른 글
| State 사용방법 (0) | 2021.08.18 |
|---|---|
| Props 사용 방법 (0) | 2021.08.18 |
| JSX 기본 문법 알아보기 (0) | 2021.08.18 |
| React code 작성 기본 (0) | 2021.08.17 |
| React의 Virtual DOM (0) | 2021.08.17 |