React - 2장 : JSX

2-1. JSX란?

- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 구성되어있다.

- 브라우저에서 실행되기 전에 번들링 되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환된다.

 

2-2. JSX의 장점

1) 보기 쉽고 익숙하다

- 아래 두 코드는 JSX 코드와 일반 자바스크립트 코드로 변환된 코드이다.

- 단순히 비교만 해봤을때에도 JSX코드가 가독성이 높고 작성하기도 쉽게 느껴진다.

 

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

 <JSX 코드>

 

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

<일반 JS 코드>

 

2) 더욱 높은 활용도

- JSX에서는 HTML 태그 뿐만 아니라, 컴포넌트도 JSX안에 작성할 수 있다.

 

function App() {
  return (
    <div>
      <Test />
    </div>
  );
}

 

2-3. JSX 문법

1) 감싸인 요소

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

왜 하나로만 감싸야 하나?  
virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리    구조로 이루워져야 한다는 규칙이 있기 때문이다.

 

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

 

2) Fragment

그런데 여기서 꼭 부모요소를 <div> 로 사용하고 싶지 않을 수도 있다.

이때 사용하는 기능이 <Fragment> 이다.

 

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

 

3) 자바스크립트 표현

- JSX안에서는 자바스크립트 표현식을 쓸 수 있다.

 

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

 

4) If 문 대신 조건부 연산자

- JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다.

- 조건에 따라 렌더링 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나 {} 안에 삼항연산자를 이용하면 된다.

 

function App() {
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? (
        <h1>리액트입니다.</h1>
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  );
}

 

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

- 특정 상황에서는 조건을 만족할때 내용을 보여주고, 만족하지 않을때 아무것도 렌더링하지 않아야 되는 상황이 나온다.

이럴 때 &&연산자로 구현할 수 있다.

 

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

&& 연산자를 사용할 때 한가지 주의해야 할 점
falsy값이 0은 예외적으로 화면에 나타난다.

const number = 0;
return number && <div>내용</div>

 

6) undefined를 렌더링하지 않기

- 리액트 컴포넌트에서 undefined만 반환하여 렌더링하는 상황에서는 에러가 발생한다.

- JSX 내부에서 undefined를 렌더링은 가능하다. 

- 에러를 방지하기 위해서는 OR(||) 연산자를 사용하면 된다.

 

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

 

7) 인라인 스타일링

- DOM 요소에 스타일을 적용할 때는 문자열이 아닌 객체 형태로 스타일을 적용해야 한다.

- 이러한 이름은 - 문자를 없애고 카멜 표기법으로 작성해야 한다.

 

function App() {
  const name = '리액트';
  const style = {
    // background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
    backgroundColor: 'black',
    fontSize: '48px', // font-size -> fontSize
  };
  return <div style={style}>{name} </div>;
}

 

8) class 대신 className

- JSX에서는 class가 아닌 className으로 설정해 주어야 한다.

 

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

 

9) 꼭 닫아야 하는 태그

- HTML에서는 <br> 이나 <input> 과 같은 태그들은 닫지 않는 상태로 코드를 작성해도 작동을 한다.

- JSX에서는 이러한 태그를 무조건 닫아 주어야 한다.

- 상황에 따라서 태그를 선언하면서 동시에 닫을 수 있는데  이를 self-closing태그라고 부르고 태그 사이에 별도의 내용이 들어가지 않는 경우에 해당이 된다.

 

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