[React] JSX로 UI 표현하기

리액트에서는 자바스크립트랑 HTML을 섞어서 사용 가능함

그래서 그냥 리턴하는걸 넘어서 컴포넌트 내부에 변수도 선언하고 해당 변수를 HTML 태그 안에서 중괄호로 묶어서 사용 가능

중괄호 안에서 변수, 문자열 작성, 연산, 삼항 연산자도 사용가능

 

//App.js
import "./App.css";

function App() {
  const abc = "hello";
  const def = 20;

  return (
    <div>
      <div>{abc}</div>
      <div>{def}</div>
      <div>{def + 20}</div>
      <div>{abc + " world"}</div>
      <div>{def > 20 ? 1 : -1}</div>
    </div>
  );
}

export default App;

주의

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있음
- 한 줄의 코드가 하나의 값으로 평가되는 식만 넣을 수 있다는 것
- if문이나 for문 같은 조건문이나 반복문은 값으로 평가되는 값이 아니라 중괄호 내부에 작성할 수 없음

2. jsx에서는 숫자, 문자열, 배열의 값만 렌더링 됨.
- 중괄호 내부에 true, undefined, null 이런거 넣으면 오류는 아니지만 화면에 렌더링되지 않음
- 만약에 객체를 랜더링하려고 하면 화면이 백지가 되는데 오류가 발생한 것
객체는 렌더링할 수 없다는 오류
객체의 값에 접근해서 렌더링하도록 바꾸면 화면에 나옴.

3. 모든 태그는 닫혀있어야 한다.
- 여는 태그가 있으면 닫는 태그도 함께 존재한다는 것.
- 닫는 태그 생략하면 바로 오류 발생

4. 최상위 태그는 반드시 1개이어야 한다.
- 리턴문은 단 하나의 태그만 반환할 수 있다. 여러개 작성하면 오류 발생