프론트엔드7-6.[React] JSX를 이용하는 방법과 이용하지 않는 방법

 JSX: react에서 HTML을 쉽게 작성할 수 있도록 하는 방법 2가지

 

1. JSX를 이용하는 태그 사용법

function App() {

  // JSX를 이용하는 태그 사용방법
  const element1 = <h1>HTML은 문자열로 처리해야 한다.</h1>;

  // 변수안에 여러 값을 생성해서 넣을 수 있다.
  const element2 = (
    <ul>
      <li>사과</li>
      <li>딸기</li>
    </ul>
  );
  
  // 내용을 감쌀 때 빈태그<>도 가능하다. 
  const element3 = (
    <>
      <p>해바라기</p>
      <p>코스모스</p>
    </>
  );

  return (
    <ul>
      <li>{element1}</li>
      <li>{element2}</li>
      <li>{element3}</li>
    </ul>
  );
}

export default App;

 

2. JSX를 사용하지 않는 태그 사용법

1. React 라이브러리에서 import하기

• React의 라이브러리에서 React클래스를 가져다 쓴다는 의미
• 이 코드가 없으면 react는 이 파일의 component를 사용하지 못함

import React from 'react';

2. 태그를 생성해주는 함수(React.createElement)를 사용해서 변수 생성한다.

const element4 = React.createElement('div',{},'태그 내에 표시되는 내용');

//동일한 표현
// const element4 = <div>태그 내에 표시되는 내용</div>

3. 변수 사용법

• 자바스크립트 영역은 기본 문법 사용이 가능하다. 

function App() {

  // 기본 문법 사용하는 방법
  const a = 100;
  let msg = "React Test";
  if(a>50){
    msg = "50보다 크네요";
  }

  const element5 = <div>{msg}</div>

  return (
    <ul>
      <li>{element5}</li>
    </ul>
  );
}

export default App;

 

[전체 코드]

import React from 'react';

function App() {

  // JSX를 이용하는 태그 사용방법
  const element1 = <h1>HTML은 문자열로 처리해야 한다.</h1>;

  // 변수안에 여러 값을 생성해서 넣을 수 있다.
  const element2 = (
    <ul>
      <li>사과</li>
      <li>딸기</li>
    </ul>
  );
  
  // 내용을 감쌀 때 빈태그<>도 가능하다. 
  const element3 = (
    <>
      <p>해바라기</p>
      <p>코스모스</p>
    </>
  );

  //JSX를 사용하지 않고 태그를 사용하는 방법
  const element4 = React.createElement('div',{},'태그 내에 표시되는 내용');
  
  //기본문법 사용하는 방법
  const a = 100;
  let msg = "React Test";
  if(a>50){
    msg = "50보다 크네요";
  }
  const element5 = <div>{msg}</div>

  return (
    <ul>
      <li>{element1}</li>
      <li>{element2}</li>
      <li>{element3}</li>
      <li>{element4}</li>
      <li>{element5}</li>
    </ul>
  );
}

export default App;

 

 

---

https://lightcode.tistory.com/10?category=784803 

ReactJS 그리고 JSX를 시작해보자