<style & className>

< style >

기존에는 문자열 방식으로

"backgroundColor: black; padding: 16px; ..."

이렇게 넣어줬다면 ,

React상에서는 객체형태 로 넣어준다.

< Class >

html 에서는 < div class="hello" > 이렇게 작성했다면,
리액트 컴포넌트에서는 class 대신에 className 을 사용한다.

at css

.App {
  background: black;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 600;
}

->요놈들을 JSX문법에서 ,

import React, { Component } from 'react';
import './App.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        리액트
      </div>
    );
  }
}

export default App;

같은 기능이라도 쓰이는 단어가 다르니 주의하자!

+

JavaScript에서도 해당되듯이 background-color과 같은 css속성들을
camelCase를 적용하여 backgroundColor 이라고 써줘야한다.

다른 예제를 통해 학습해보면,

<React에서 스타일 사용하기>

<css속성울 javaScript안에서 작성하여 전달하기>

import React, { Component} from 'react';

class App extends Component{
  render(){
    const  style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '36px'
    };
    return(
      <div style = {style}>
        안녕하세요!
      </div>
    );
  }
}

export default App;

JSX문법에서는 css 의 속성을 camelCase로 써주었고,
이 스타일을 JSX안에서 적용하기 위해서 { } 을 통해 전달해주었다.

또한 javascript를 통해서 전달하는 것이기에

import React, { Component} from 'react';

class App extends Component{
  render(){
    const  style = {
    	.
    	.
      
      fontSize: '5 + 6+ "px" '
        .
        .
      
    };

이렇게 javascript 문법을 사용해서 전달해도 된다.

<css에서 스타일을 작성하여 전달하기>

.app{
    background: black;
    color: aqua;
    font-size: 36px;
    padding : 1rem;
    font-weight: 600;
}

이 css코드를

import React, { Component} from 'react';
import './app.css';

class App extends Component{
  render(){
    return(
      <div className = "app">
        안녕하세요!
      </div>
    );
  }
}

export default App;

로 작성하여 전달한다.

• 윗 단에 import './app.css'; 라는 css로 작성된 파일을 써주고,

• className = "app"를 통해 전달~!

  [className이 아닌 class라고 써도 작동은 한다! BUT! className라고 쓰는것이 올바른 convention이다.]

  ---

  <JSX에서 주석 작성>

	{/* 멀리라인에 중괄호 까지!*/}

=> 멀티라인 + 주석 으로 같이 써줘야지만 주석이 된다

혹은

	<h1
        whatever = "abcdefg" //내가 여기에 주석을 남기리!!
        >
        </h1>

으로 태그안에다가 주석을 남길 수 있다.