1. JSX 란?

Introduction to JSX
HTML 코드를 JSX 코드로 변환해주는 사이트
JSX
- 자바스크립트 확장 문법
- .js 파일에서 쓰는 HTML 대용품
- 왜 쓰냐
  - 가독성 높고 코드 작성하기 쉬워서
JSX는 공식적인 자바스크립트 문법이 아님
- Babel에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정
- Babel을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용 가능

💡 .js vs .jsx

React 또는 React Native 프로젝트를 할 때 .js 확장자를 사용하는 경우도 있고 .jsx 확장자를 사용하는 경우도 있음

스택오버플로우 js vs jsx

.js와 .jsx의 확장자로서의 차이는 없다고 함

React 코드를 JS로 바꾸는 과정에서 JSX들을 표준적인 js 파일로 바꿈

둘 중 하나 골라서 일관된 방법으로 확장자를 쓰기

2. JSX 문법

2.1 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함

1import React from 'react'
2function App() {
3  // 여러 요소가 있다면 반드시 부모 요소(div) 하나로 감싸야 한다.
4  return (
5    <div>
6      <h1>뭐시기</h1>
7      <h2>저시기</h2>
8    </div>
9  )
10}
11
12export default App

부모 요소에 div 사용하기 싫으면? React v16부터 도입된 Fragment 기능 쓰자

1function App() {
2  // 마땅히 감쌀 요소를 생각안나면, Fragment
3  return (
4    <Fragment>
5      <h1>뭐시기</h1>
6      <h2>저시기</h2>
7    </Fragment>
8  )
9}

1function App() {
2  // Fragment는 다음처럼 생략 가능
3  return (
4    <>
5      <h1>뭐시기</h1>
6      <h2>저시기</h2>
7    </>
8  )
9}

2.2 HTML에 JS 표현 : 로 표현

1function App() {
2  const name = '리액트'
3  return (
4    <>
5      {/* {}로 감싸서 표현 */}
6      <h1>Hello {name}</h1>
7    </>
8  )
9}

데이터바인딩 : 변수에 있던걸 HTML에 꽂아넣는 것

2.3 if문 대신 삼항 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용 못함
대신 삼항연산자을 사용하면 됨

1function App() {
2  const name = '리액트'
3  return <div>{name === '리액트' ? <h1>리액트</h1> : <h1>리액트 아님</h1>}</div>
4}

2.4 for문 대신 map()

JSX 내부의 자바스크립트 표현식에서 for문을 사용 못함
대신 **map()**을 사용하면 됨

1let array = [2, 3, 4]
2
3array.map(Element => {
4  console.log(Element) // 2, 3, 4
5})

JSX에서 HTML을 반복 생성하고 싶으면, 다음처럼 사용

1function App() {
2  // `<div>안녕</div>`이 3개 생성됨
3  return (
4    <div>
5      {[1, 2, 3].map(function () {
6        return <div>안녕</div>
7      })}
8    </div>
9  )
10}

만약 일반 for문 쓸려고 하면, 다음처럼 쓸 수는 있지만, 귀찮으니 map이 좋음

1function App() {
2  let arr = []
3  for (let i = 0; i < 3; i++) {
4    arr.push(<div>안녕</div>)
5  }
6  return <div>{arr}</div>
7}

2.5 AND 연산자로 조건부 렌더링

특정 조건을 만족할 때만 내용을 보여주고, 만족하지 않을 때는 아무것도 렌더링안할 떄,
AND 연산자(&&)를 사용해서 조건부 렌더링 가능

1function App() {
2  const name = '리액트 아님'
3  // name이 '리액트'이면, <h1>리액트입니다.</h1>이거 보여주고
4  // name이 다른 거라면, null 반환하셈
5  return <div>{name === '리액트' && <h1>리액트임</h1>}</div>
6
7  // 위 문법과 같은 문법
8  // return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
9}

2.6 OR 연산자로 undefined 렌더링 안하기

OR(||) 연산자를 사용하면 값이 undefined일 때, 오류를 방지 가능

1function App() {
2  const name = undefined
3  // 값이 undefined라서 오류가 날 떄, 오류 처리할 때
4  return name || '값이 undefined임'
5}

2.7 인라인 스타일링

React에서 DOM 요소 스타일 적용할 떄는, 문자열이 아닌 객체 형태로 넣어야 됨
background-color처럼 -문자가 포함되는 이름은 카멜 표기법(camelCase)으로 작성
- JS에서 -를 숫자 -로 인식해서 카멜표기법 사용하는 것임
- background-color는 backgroundColor로

1function App() {
2  const style = {
3    backgroundColor: 'black',
4    color: 'aqua',
5    fontSize: '48px', // font-size -> fontSize
6  }
7  return <div style={style}> 글씨 </div>
8}

또는

1<div style={{ color: 'blue', fontSize: '30px' }}> 글씨 </div>

2.8 HTML에 class 대신 className

HTML에 class명을 class=" "가 아니라 className=" "이렇게 씀
왜냐하면 -를 숫자 -로 인식해서 카멜표기법으로 작성하는 것처럼,
JS에서 사용하는 예약어인 class라는 키워드가 있어 구분하기 위해서 className이라고 씀

1function App() {
2  // class가 아니라 className 사용
3  return <div className="react">글씨</div>
4}

2.9 주석

1function App() {
2  // 여기 주석은 이렇게 씀
3  return (
4    <>
5      {/* 주석은 이렇게 씀 */}
6      <div className="react">글씨</div>
7    </>
8  )
9}

01-React 왜 쓰나 03-컴포넌트