[React] 1. React 복습 겸 블로그 만들어보기 시작

리액트 개념 공부를 이미 하고 프로젝트를 진행하고 있지만 기초는 탄탄할수록 좋기 때문에 복습을 해보려고 한다😊

---

🤍 세팅

npx create-react app . (or 생성할 파일)

리액트 프로젝트 생성을 위한 명령어이다

현재위치에 만들려면 .
새로운 파일을 생성해서 만들려면 파일명 입력하기

◾ App.js

여기가 메인 페이지다
이미 채워져있던 html을 삭제하면 된다 !

상단 nav 만들기

간단한 블로그라도 상단메뉴가 있어야 하니 상단 nav를 간단히 만들었다

import './App.css';

function App() {
  return (
    <div className="App">
    <div className="black-nav">
        <h4>BLOG </h4>
      </div>
    </div>
  );
}

export default App;

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

틀 완성 완료!

🤍 문법

◾ 1. class 대신 className

App.js 에서는 return 부분이 렌더링이 되는데, 이 부분은 html 처럼 생겼지만 html이 아닌 JSX 언어이다
그래서 className을 사용해야 한다(class는 js의 예약어이기 때문)

◾ 2. 데이터 바인딩은 => { }

js의 변수같은 자료를 html에서 보여주고 싶을 때는 중괄호로 감싸야한다

이 중괄호 안은 데이터바인딩 외에도 여러가지 html 속성들에 사용된다
ex) href, id, className, src

◾ 3. html 에 style 속성을 넣으려면 자료형으로 { }

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

{ 속성명 : '속성값' }
속성명에 대쉬기호를 쓸 수 없다 = CamelCase