(React) 블로그 만들기 - 리액트 기본 레이아웃과 기본 문법

기본 레이아웃

저번 글에서 띄운 미리보기 띄운 상태에서 진행해야 실시간으로 체크 가능.
리액트는 html 인듯 아닌듯 애매한 문법을 사용하는데 이걸 JSX 라고 한다.
App.js 를 깨끗한 상태로 수정해주자.

import 블라블라;

function App(){
	return (
    	<div className="App">
      		//다 지워준다
      	</div>
    )
}

이제 컨셉이 블로그이니까 나름의 Nav를 만들어주자.

// App.js

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
    </div>
  )
}

// App.css

.black-nav {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
}

저장해주면 Nav가 깔끔하게 적용된 걸 볼 수 있다.

간단한 JSX 문법

1. 우리가 알고 있는 css를 위한 class는 --> className 으로 사용한다. 자바스크립트 성질이 있기 때문에 예약어 class가 존재하기 때문.
2. 변수를 데이터바인딩 하기 위해서는 { } 로 감싸준다. 👇 아래처럼

function App(){

  const post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>My Blog</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

3. html에 style 속성을 넣고 싶으면 { } 안에 객체 형식으로 스타일을 준다. 그리고 font-size 처럼 케밥case는 카멜case로 변화해줘야 한다. 👇 아래처럼 (css 파일에서 className 주는게 더 편함)

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>