React.js 스타일

외부 css파일로 적용시켜보기

.App {
  background-color: black;
}
h2 {
  color: red;
}
#bold_text {
  color: green;
}

css파일을 export를 따로 하지 않는다.
class, id명은 html파일에 적용하듯이 사용할 수 있다.

//css 파일 import
import "./App.css";

import MyHeader from "./myHeader";
import MyFooter from "./MyFooter";

function App() {
  return (
    //JSX문법
    <div className="App">
      <MyHeader />
      <h2>안녕 리액트</h2>
      <b id="bold_text">React.js</b>
      <MyFooter />
    </div>
  );
}

export default App;

App()함수의 return 값의 html구조안에 class와 id값을 지정해 주룻 있다.

• html에서의 class는 JSX문법에서는 className이므로 주의

내부 style로 css 적용시키기

function App() {
  const style = {
    App: {
      backgroundColor: "black",
    },
    h2: {
      color: "red",
    },
    bold_text: {
      color: "green",
    },
  };

  return (
    //JSX문법
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>안녕 리액트</h2>
      <b style={style.bold_text}>React.js</b>
      <MyFooter />
    </div>
  );
}

App()함수 내에 style의 정보를 가지고 있는 객체를 생성해 { }를 이용해 객체의 점표기법을 이용해 스타일의 값을 변경할 수 있다.
style={style.App}
style={style.h2}
style={style.bold_text}

JSX

1. { }안에는 문자열, 숫자, 연산, 함수 호출을 할 수 있다.

• 다만, 결과 값이 문자열, 숫자 일때만 브라우저에 나타나면, 배열, 객체와 같은 것들을 나타나지 않으니 주의하자

2. 조건부 랜더링

• 조건에 따라 각각 다른 것을 랜더링 하는 것으로 많이 사용하는 문법이기때문에 알아둘 필요가 있다.

3. html문법과 달리 항상 닫는 태그가 있어야 한다.
   <img></img> <a></a>

• <img/>로 표기가 가능하다.