TIL(2020.12.10)
1. JSX기본 2(css style, class)
1) css 적용하기
- 기존 html상에서 문자열로 넣어주던 형태와 다르게 적용함.
<div style="background-color: blue; font-size: 15px;">
<h3>hello world!</h3>
</div>
// 이런식으로 하던거
- 리액트 상에서는 객체 형태로 스타일을 적용함
- 기존 background-color 같이 하이픈으로 구분하던 것을 카멜케이스로 구분함.
ex) background-color: white; -> backgroundColor: white; - 객체형태로 스타일을 선언하고 적용할 element에 스타일 부여
class App extends Component {
render() {
const style = {
backgroundColor = 'skyblue'
}; // 객체형태로 css 스타일 선언
// 스타일을 js로 부여하기 때문에 js문법으로도 가능
// ex) fontSize: 10 + 5 + 'px'
return (
<div style = {style}> // element에 style부여
<h1>Hello react!</h1>
</div>
);
}
}
export default App;
이런 느낌임.
2) JSX class 부여하기
- 기존 js에서는 클래스를 부여할때
<div class='name'>
이런식으로 부여했는데
JSX에서는 className으로 부여해주면 된다.
<div className='name'>
//이렇게
- js와 마찬가지로 import만 잘해주면 외부 css 불러오는데에 아무 문제없음.
- Name을 빼도 작동은 하지만 className 다 써주는게 올바른 문법임.
3) 리액트에서 주석 작성하기
- //, /**/ 되는데 그냥쓰면 안됨.
- {/**/} 이런 식으로 중괄호로 감싸주어야함.
<h1
something="blah" //주석달기
>
- 위와 같이 태그사이에 주석달기는 가능함
Author And Source
이 문제에 관하여(TIL(2020.12.10)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@skwlalsl93/TIL2020.12.10저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)