reactjs 속의 HTML, JSX 문법 알아보기

1. 개요

• JSX는 리액트에서 레이아웃 만들때 씀
  
  • 자바스크립트를 확장한 문법인데 JS랑 HTML을 섞어놓은 형태임
  • HTML이랑 다른건 브라우저에 바로 보여줄 수 없고 빌드 과정을 거쳐야 랜더링 가능한 점
• app.js파일에다가 JSX코드 작성하면 됨(나중에 이걸 빌드해서 HTML파일로 바꿀거임)
• 시작하기 전에 div태그만 남기고 다 지웁시다(아래 처럼 만들면 됨)

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

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

2. CSS 적용하기

• app.css파일에 css코드 작성하면 됨

import './App.css';

• css파일을 app.js에 적용하려면 위 코드를 입력해서 css파일 연결해줘야 함
• 혹은

style={{color:'red', fontSize:'16px'}}

• 형태로 태그안에 직접 넣기
  • 참고로 font-size 아니고 fontSize임
  • JSX에서 style 옵션 넣을때 바(-)를 안씀

3. 변수 넣기

• =데이터 바인딩
• 변수 선언하고 {변수}형태로 쓰면됨

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

function App() {

  // 서버 데이터인 척 하기
  let post='강남우동맛집';

  return (
    <div className="App">
      {/* 리액트에서는 class 대신 className 씀 */}
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      {/* 변수에 담긴 데이터 꽂으려면(데이터 바인딩) 중괄호 쓴다 
      id나 클래스에도 넣을 수 있음*/}
      <h4>{post}</h4>
    </div>
  );
}

export default App;

• 참고로 클래스명은 className에다가 적어줘야 함