JSX의 기본 규칙 - 리액트 컴포넌트를 만들게 될 때 사용하는 JSX

jini.choi·2022년 5월 19일
0

React

목록 보기
2/21
  • JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법

  • 얼핏보기에는 HTML처럼 생겼지만 JavaScript다.

  • babel이라는 도구를 사용해서 xml형태의 코드가 JavaScript로 변환이 되는것

  • JSX가 JavaScript로 제대로 변환이 되려면 지켜주어야하는 몇가지 규칙이 있다.


📑 JSX의 기본 규칙

  • 태그는 꼭 닫기 (br과 같은 빈태그도 <br />로 셀프클로징을 해주어야함)
    두 개 이상의 태그는 무조건 하나의 태그로 감싸기
    (Fragment <></> 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않음)

  • JSX 내부에 자바스크립트 {변수}로 감싸기

  • JSX 에서 style 과 CSS class 인라인 스타일은 객체 형태로 작성 & camelCase 형태로 네이밍

    ex) backgroundColor

  • class는 className= 으로 설정

  • JSX 내부의 주석
    {/* 이런 형태로 */}
    열리는 태그 내부에서는 // 이런 형태로도 가능

import React from 'react';
import React from './Hello.js';
import './App.css';

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, //기본 단위PX
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }
  return (
    <>
      {/* 주석입니다.*/}
      <Hello
        // 주석입니다.
      />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C

profile
개발짜🏃‍♀️

0개의 댓글