TIL(2020.12.10)

skwlalsl93·2020년 12월 10일
0

TIL

목록 보기
5/28

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" //주석달기
  >
  • 위와 같이 태그사이에 주석달기는 가능함
profile
wishing is not enough, we must do.

0개의 댓글