React_JSX

- JSX

: 리액트에서 생김새를 정의할 때, 사용하는 문법

 

- 태그는 열었으면, 닫아야한다.

태그 사이에 내용이 들어가지 않는 경우, Self Closing Tag 사용한다.

 

- Component return으로 최상위 태그는 최대 하나만 존재해야 한다.

만약 최상위태그를 여러개 사용하는 경우, 전부를 감싸는 최상위태그를 만들어주자.

만약, div태그로 감싸기에 애매하다면, 리액트의 Fragment로 감싸면 된다.

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

 

- JSX 안에 JS 값 사용하기 : {}

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

중괄호{}안에 값을 넣어서 사용한다.

 

- style 과 className

먼저, 인라인 스타일은 객체 형태로 작성 해야 한다. 그리고, background-color처럼 -로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 한다.

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

 

CSS class를 설정할때, class= 가 아닌 className= 으로 설정해줘야한다.

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

import "./App.css";

function App() {
  const name = "이창민";
  const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: 24,
    padding: "1rem",
  };

  return (
    <>
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

 

- 주석

JSX에서 주석은 {/*주석입니다*/} 이런 형식으로 작성

 

---

내용 정리

 

Babel

JSX

tag

Component에 return에서 하나의 tag

Fragment

JS 값 -> {}

inline style name -> camelCase

css Class -> 'className='

 

- 후기(소식)

지금 본가 온지 3일차인데, 미치겠다.. 집에 있는 60시간동안 배고픈적이 한번도 없었다. 그냥 계속 먹었다..

내일 올라가면 운동장 넌 뒤이이이졌다.

내일 헬스도 뒤이이이이졌다.

리액트 넌 진짜 죽었다.