[React] 2. JSX

Uicheon·2023년 6월 3일

리액트

목록 보기

2/3

2.1 코드 이해하기

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

import 구문이 사용됐다. 이는 특정 파일을 불러오는 것
원래 브라우저에는 없는 기능
Node.js에서 지원하는 기능
Node.js에서는 import가 아닌 require 구문으로 패키지를 불러올 수 있다
이러한 기능을 브라우저에서도 사용하기 위해 번들러(bunlder)를 사용
- 대표적인 번들러로 웹팩, 파셀, 브라우저리파이가 있다.

function 키워드를 사용하여 컴포넌트를 만들면 함수형 컴포넌트라고 한다.
이런 코드를 JSX라고 부른다.

function App() {
  return (
...

2.2 JSX

JSX는 JS의 확장 문법이며 XML과 매우 비슷하다.
브라우저에서 실행되기 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태의 코드로 변환된다.

아래와 같은 코드가 있다고 하자

function App(){
  return (
    <div>
      Hello <b>react</b>
    </div>

다음과 같이 변환된다.

function App(){
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));

컴포넌트 생성시마다 JSX를 작성하는게 아니라 매번 React.createElement 함수를 사용하면 불편할 것이다.

2.3 JSX 장점

보기 쉽고 익숙하다
- HTML 같아서 익숙하다
더욱 높은 활용도
- HTML 태그 뿐 아니라 컴포넌트도 JSX안에서 작성 가능

2.4 JSX 문법

감싸인 요소
- 반드시 부모 요소 하나로 감싸야 한다.
- 다음 코드 에러 발생

return (
  <h1> h1 </h1>
  <h1> h1 </h1>
)

왜 에러가 발생 할까?
VDOM에서 컴포넌트 변화를 감지할 때 효유렂긍로 비교하도록 규칙임
그런데 <div>같은 컴포넌트가 싫다면? Fragment를 사용해도 좋다.
Fragment는 다음과 같이 사용된다.

<> </>
<Fragment> </Fragment>

다음을 렌더링 해보자.

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

function App() {
  const name = '리액트';
  return (
    <>
      <h1> {name} 안녕!</h1>
      <h1> 잘 동작하니 ?</h1>
    </>
  );
}

export default App;

const vs let

const

ES6에 도입됨

한번 지정하면 변경이 불가능 한 상수

let

동적인 값을 담는다.

이전엔 var를 사용했는데 scope가 함수 단위

문제 해결 위해 let 사용 (블록 단위)

2.4.3 If문 대신 조건부 연산자

JSX 내부 자바스크립트에서 if문을 사용할 수 없다.
하지만 조건에 따라 렌더링 해야 한다면, JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {}안에 연산자를 사용한다.

function App() {
  const name = '리액트';
  return (
    <>
    {name ==='리액트' ? (
      <h1> 리액트 동작합니다</h1>) : (<h1> 리액트 아닙니다 </h1>)
      }
    </>
  );
}

export default App;

(사족) 이걸 쓴다고?

2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링

다음 코드를 줄여보자

function App() {
  const name = '리액트';
  return (
    <>
    {name ==='리액트' ? ('리액트입니다.'): (null)}
    </>
  );
}

&& 연산자로 더 짧은 조건부 렌더링을 할 수 있다.

function App() {
  const name = '리액트';
  return (
    <>
    {name ==='리액트' && '리액트입니다'}
    </>
  );
}

&& 연산자로 조건부 렌더링은 false를 렌더링할 때는 null 처럼 아무것도 나오지 않기 때문이다.
그러나 falsy한 값 0은 예외적으로 화면에 나타난다.
const number = 0;
return number && <>내용</>

2.4.5 undefined를 렌더링하지 않기

어떤 값이 undefined일 수도 있다면, OR(||) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있다.

function App() {
  const name = undefined;
  return name || '값이 undefined입니다.';
}

반면 jsx 내부에서는 undefined 렌더링 하는 것은 괜찮다.

function App() {
  const name = undefined;
  return <div>{name} </div>
}

default 값을 다음처럼 표현 가능하다.

function App() {
  const name = undefined;
  return <div>{name || '리액트'}</div>
}

2.4.6 인라인 스타일링

리액트에서 DOM에 스타일 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 한다.
스타일 이름은 모두 카멜케이스로 바꾼다.

function App() {
  const name = '리액트'
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px', // font-size
    fontWeight: 'bold', // font-weight
    padding: 16
  };
  return <div style={style}>{name}</div>
}

2.4.7 class 대신 className

일반 HTML에서 CSSS 클래스 지정시 <div class="myClass">같이 지정한다. 하지면 JSX에서는 class가 아닌 className으로 지정해야 한다.

# App.css
.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px
}

function App() {
  const name = '리액트'
  return <div className="react">{name}</div>
}

2.4.8 꼭 닫아야 하는 태그

HTML에서 <input>태그는 닫는 태그가 없어도 동작한다.
근데 리액트는 그런거 없다. 그대신에
self-closing태그가 있다. 태그를 선언과 동시에 닫을 수 있다.
태그 사이에 별도 내용이 없다면 쓰기 좋다.

<input />

2.4.9 주석

function App() {
  const name = 'react'
 return (<>
  {/* 주석은 이렇게 작성합니다. */}
  <div 
    className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석 작성 가능
    >
    {name}
  </div>
  // 하지만 이런 주석이나
  /* 이런 주석은 그대로 나타난다. */
 </>);
}
export default App;