React 기본 사용법 JSX 문법 기초

0. 리액트는 프로젝트 폴더 내의 src 내에 있는 App.js에다가 코딩하면 됨

 

JavaScript 문법으로 쓰는데 정확히는 JSX 문법으로 사용함.

import './App.css';

function App() {
  return (
    <div className="App">
      '여기다가 코딩하면 됨'
    </div>
  );
}

export default App;

 대충 이런식으로 저 return 안에다가 html 방식으로 코딩하면 됨

return 안에는 하나의 태그만 써야하기 때문에 여러 태그를 쓸 때는 가장 바깥 쪽에 div 태그로 감싸주면 됨

 

CSS 스타일은 App.css 안에다가 작성하면 됨

.black-nav {
	background : black;
    ...
}

 

 

1. JSX는 class 대신 className이라고 씀

코드를 짤 때 보면 평소 짜던 html과 다른 부분이 있음

class명을 넣을 때 class="" 대신 className=""으로 쓰는데 이건 순수 HTML이 아니라 JSX라고 부르는 언어의 특성임

 

 

2. 변수 넣고 싶을때는 중괄호

데이터바인딩을 하고 싶으면(HTML 사이에 변수 값을 끼워넣고 싶으면) 아래처럼 중괄호 안에 변수명만 담으면 됨

function App() {
  let data = '안녕하세요 123'

  return (
    <div className="App">
      '데이터: {data}'
    </div>
  );
}

 

클래스명에도 데이터바인딩 가능함

function App() {
  let data = '안녕하세요 123'
  let a = 'App'

  return (
    <div className={a}>
      '데이터: {data}'
    </div>
  );
}

 

3. style 속성 줄 때는 { } 자료형으로

<div style="color: red; font-size: 50px"> 이런식으로 스타일 주고싶으면 html과는 다르게

style={ } 안에 { } 자료형으로 집어넣어야 함.

<div style={ {color: red, fontSize: '50px'} }> 본문내용 </div>

또한 기존 html에서 font-size라고 썼던 것 처럼 못쓰고 fontSize처럼 camel case로 적어야 함