개발하는 사막여우
개발하는 사막여우
개발하는 사막여우
전체 방문자
오늘
어제
  • All (310)
    • Books (13)
      • 읽기 좋은 코드가 좋은 코드다 (13)
    • Study (6)
      • Blockchain (3)
      • Algorithm (3)
    • Baekjoon (36)
    • Programmers (166)
    • LeetCode (15)
    • Open Source (1)
      • Youtube Popout Player (1)
    • Language (32)
      • Python (9)
      • JS (8)
      • Java (5)
      • HTML (6)
      • CSS (4)
    • Library & Framework (15)
      • React.js (15)
    • IDE (2)
      • IntelliJ (2)
    • Airdrop (9)
    • Tistory (2)
    • etc.. (12)
      • Cozubi (6)
      • lol-chess (0)

블로그 메뉴

  • Github

공지사항

인기 글

태그

  • 코딩테스트연습
  • 알고리즘문제풀이
  • 백준
  • Python
  • Java
  • 신규 코인 에어드랍
  • 읽기 좋은 코드가 좋은 코드다
  • 코인줍줍
  • 파이썬
  • 프로그래머스
  • 2018 KAKAO BLIND RECRUITMENT
  • 코주비
  • programmers
  • 클린 코드 작성법
  • 카카오 공채
  • Cozubi
  • 카카오 코딩테스트
  • 클린 코드
  • 카카오 알고리즘 문제
  • 프로그래머스 위클리 챌린지

최근 댓글

최근 글

티스토리

반응형
hELLO · Designed By 정상우.
개발하는 사막여우

개발하는 사막여우

[React.js] 리액트 JSX
Library & Framework/React.js

[React.js] 리액트 JSX

2021. 10. 12. 20:05
반응형

<JSX란?>

JSX란 리액트 컴포넌트에서 XML 형식의 값을 반환해주는 것을 의미한다.

<JSX의 동작 방식>

JSX의 동작 방식은, 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 JSX를 Javascript로 변환해준다.

Babel: 자바스크립트의 문법을 확장해주는 도구. 아직 지원되지 않은 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행할 수 있도록 해준다.

<JSX의 규칙>

1. 태그는 꼭 닫혀있어야 한다.
=> <div> 태그가 있으면 반드시 </div> 태그가 존재할 것, 혹은 self closing 태그를 사용할 것.
2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져야 한다.
=> 반드시 하나의 태그에서 시작된 트리 구조가 될 수 있도록 할 것. 애매한 경우 Fragment 태그(<>)를 사용할 수 있다.
3. JSX 내부에 변수 사용시 {}로 감싸준다.
4. 클래스명 지정시 'className=*'의 형태로 사용한다.

<div className='hi'>Hi</div>

5. inline style 설정 시 객체 형태로, snake_case가 아닌 camelCase를 사용한다.

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

6. 주석은 {/* ~~~ */} 의 형태로, 열리는 태그 내부에서는 //를 사용해 작성한다.

{/* 이것은 주석입니다 */} <Hello // 열리는 태그 내부에서는 이렇게 주석을! />

반응형
저작자표시 (새창열림)

'Library & Framework > React.js' 카테고리의 다른 글

[React.js] 리액트 useEffect 기본 사용  (0) 2021.10.14
[React.js] 리액트 useRef  (0) 2021.10.13
[React.js] 리액트에 파이어베이스 연동하기 / React + Firebase  (0) 2021.04.12
[React.js] 리액트 이미지 사용 / react img src  (2) 2021.02.28
[React.js] Router 사용 / react-router-dom  (0) 2021.02.26
    'Library & Framework/React.js' 카테고리의 다른 글
    • [React.js] 리액트 useEffect 기본 사용
    • [React.js] 리액트 useRef
    • [React.js] 리액트에 파이어베이스 연동하기 / React + Firebase
    • [React.js] 리액트 이미지 사용 / react img src
    개발하는 사막여우
    개발하는 사막여우
    개발개발 주저리주저리

    티스토리툴바