React / JSX 문법

JSX(JavaScript XML)

React에서 사용되는 Javascript의 확장 문법으로, HTML과 유사한 형태로 Javascript 코드가 작성이 가능하다.

무조건 jsx를 쓸 필요는 없지만, 간결하게 작성할 수 있기 때문에 많이 사용된다.

 

규칙

1. return문 안에 HTML 형태로 작성
2. 두 줄 이상 작성할 경우 소괄호로 묶어야 함
3. 하나의 최상위 요소로 묶어줘야 함
   내부적으로는 Javascript 객체로 변환되기 때문에, 하나의 배열로 감싸지 않은 함수에서는 두 개의 객체를 반환할 수 없기 때문에 <div></div>나 <></>(Fragment : 브라우저상 html 트리 구조에서 흔적 없이 그룹화)로라도 감싸줘야 한다.
4. 중괄호를 사용해 Javascript 코드를 작성함

 

// JSX 문법 사용
function App() {
  return (
    <h1>안녕하세요</h1>
  );
}

// JSX 문법 사용X
function App() {
  return React.createElement("h1", null, "안녕하세요");
}

 

 

지금은 한줄만 작성했기 때문에 return 뒤 소괄호를 생략해도 상관없지만 두 줄 이상의 경우 위의 규칙 2번과 3번을 꼭 지켜 작성해야 한다.

 

function App(){
  return (
  <div>함수형 컴포넌트
    <p>자식 요소 1</p>
    <p>자식 요소 2</p>
    <div>자식 요소 3
      <p>자식의 자식요소</p>
    </div>
  </div>
  );
}

 

4번인 중괄호를 사용해 자바스크립트 코드도 작성하려면 다음과 같이 작성할 수 있다.

간단한 연산도 가능하며, return문의 앞에서 변수를 선언해 return문 내에서 다음과 같이 {}에 변수의 값을 가져오는 등 다양하게 사용이 가능하다.

 

function App(){
  const pTag = document.querySelectorAll('p');
  const pCount = pTag.length
  return (
  <div>함수형 컴포넌트
    <p>자식 요소 1</p>
    <p>자식 요소 2</p>
    <div>자식 요소 3
      <p>자식의 자식요소</p>
      <p>1+1의 값은?</p>
      <p>= {1+1}</p>
    </div>
    <div>p요소의 개수는 {pCount}개</div>
  </div>
  );
}

 

 

---

 

 

컴포넌트 기반으로 간단하게 햄버거를 구성할 수 있다.

우선 컴포넌트 구조와 전혀 거리가 멀어보이는 함수형 컴포넌트 하나를 작성했다.

 

컴포넌트 구조X

 

App.jsx

function App(){
  return (
    <>
      <div className="bread">
        밀가루
        <span>물</span>
        <span>계란</span>
        <span>이스트</span>
      </div>
      <div className="patty meat">
        소고기
        <span>후추</span>
        <span>소금</span>
      </div>
      <div className="lettuce">
        잎사귀
        <span>줄기</span>
      </div>
      <div className="tomato">
        껍질
        <span>과육</span>
        <span>씨앗</span>
      </div>
      <div className="cheese">
        우유
        <span>소금</span>
        <span>색소</span>
      </div>
      <div className="bread">
        밀가루
        <span>물</span>
        <span>계란</span>
        <span>이스트</span>
      </div>
    </>
  );
}

 

App.css

* {
  box-sizing: border-box;
  text-align: center;
}
body {
  justify-content: center;
}
span {
  margin-left: 1em;
}
.bread {
  background-color: orange;
}
.patty{
  background-color: brown;
}
.lettuce {
  background-color: green;
}
.tomato {
  background-color: red;
}
.cheese {
  background-color: yellow;
  color:black;
}

 

 

함수 컴포넌트 만들어서 사용하기

 

App.jsx

import "./App.css";

function App() {
  return (
    <>
      <Bread />
      <Patty />
      <Lettuce />
      <Tomato />
      <Cheese />
      <Bread />
    </>
  );
}

function Bread() {
  return (
    <div className="bread">
      밀가루
      <span>물</span>
      <span>계란</span>
      <span>이스트</span>
    </div>
  );
}

function Patty() {
  return (
    <div className="patty meat">
      소고기
      <span>후추</span>
      <span>소금</span>
    </div>
  );
}

function Lettuce() {
  return (
    <div className="lettuce">
      잎사귀
      <span>줄기</span>
    </div>
  );
}

function Tomato() {
  return (
    <div className="tomato">
      껍질
      <span>과육</span>
      <span>씨앗</span>
    </div>
  );
}

function Cheese() {
  return (
    <div className="cheese">
      우유
      <span>소금</span>
      <span>색소</span>
    </div>
  );
}

export default App;

 

 

주의해야할 점은 컴포넌트 이름은 무조건 대문자로. 시작해야한다는 것이다...

그리고 색상을 적용하기 위해 className으로 클래스를 부여해줬는데 그 이유는 이미 js에서 class가 예약어로 지정되어있기 때문에 className을 적용해야 한다. (class여도 적용은 되지만 경고문구가 많이 뜰 수 있다.) 

 

아까 코드보다 길어졌지만 이제는 컴포넌트를 사용해 다른 구조의 햄버거를 만들어볼 수도 있다.

물론 이경우에도 재료를 많이 넣으면 보기 좀 복잡해질 수도 있다.

 

 

새로운 버거 메뉴를 만들듯이 컴포넌트를 활용해 새로운 컴포넌트를 만들수 있다.

 

import "./App.css";

function App() {
  return (
    <>
      <ClassicBurger />
    </>
  );
}

function ClassicBurger() {
  return (
    <>
      <p>기본 버거</p>
      <Bread />
      <Patty />
      <Lettuce />
      <Tomato />
      <Cheese />
      <Bread />
    </>
  );
}

function DoubleCheeseBurger() {
  return (
    <>
      <p>더블치즈버거</p>
      <Bread />
      <Patty />
      <Cheese />
      <Patty />
      <Cheese />
      <Bread />
    </>
  );
}

/* 버거 재료 컴포넌트들은 생략 */

export default App;