React 기초_1

태그에 class를 주고 싶으면?

<div className="클래스명">

리액트를 사용하는 이유? - 데이터 바인딩이 쉽기 때문이다.

*데이터 바인딩 쉽게하는 방법 { 변수명, 함수 등}

예시

import './App.css';

function App() {

  let posts = '강남 고기 맛집';
  function 함수(){
  	return 100
   }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4> { posts }</h4>
      <h4> { 함수() }</h4>
    </div>
  );
}

export default App;

이미지를 불러올 때

위와 유사하게 {}를 사용

import './App.css';
import logo from './logo.svg';

function App() {

  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <img src= {logo} />
      <h4> { posts }</h4>
    </div>
  );
}

export default App;

JSX에서 style 속성 집어 넣을 때

style={object 자료형으로 만든 스타일}

<div style ={ { color : 'blue', fontSize : '30px'} }>개발 Blog</div>

{속성명 : '속성값'} 오른쪽은 문자와 숫자를 넣음.
font-size는 js에서 뺄셈이기 때문에 사용할 수 없음.
camelCase작명관습에 따라 속성명을 바꿔줘야함 => fontSize

!css가 길어질 수 있으니 되도록이면 className을 사용하는 것을 권장!