리액트 JSX 문법 - 셀프 개발자 코딩 부트캠프

# 감싸인 요소

function App() {
 return (
   <h1>하이하이</h1>
   <h1>하이하이2</h1>
 );
}
 
export default App;

컴포넌트가 여러개 있다면 부모로 한번 감싸야 한다.

webpack 5.70.0 compiled with 2 errors in 65 ms
ERROR in src/App.tsx:7:5
TS2657: JSX expressions must have one parent element.
     5 | function App() {
     6 |   return (
  >  7 |     <h1>하이하이</h1>
       |     ^^^^^^^^^^^^^
  >  8 |     <h1>하이하이2</h1>
       | ^^^^^^^^^^^^^^^^^^^
     9 |   );
    10 | }
    11 |


이런 에러가 발생한다

 

function App() {
 return (
   <div>
     <h1>하이하이</h1>
     <h1>하이하이2</h1>
   </div>
 );
}
 
export default App;

이런식으로 한번 감싸줘야 한다.

function App() {
 return (
   <>
     <h1>하이하이</h1>
     <h1>하이하이2</h1>
   </>
 );
}
 
export default App;

아무것도 넣지 않은 태그를 넣어도 된다.

 

 

# 자바스크립트

function App() {
 let name:string = "안녕";
 
 return (
   <div>
     <h1>{name}</h1>
   </div>
 );
}
 
export default App;

jsx안에서 자바스크립트 코드를 쓸 수 있다. 현재 타입스크립트로 진행하고 있기 때문에 타입선언을 해 보았다. name을 DOM 안에 넣을수 있다. {name} 요런 식으로 쓰면됨.

 

# if 문

function App() {
 let check:boolean = false;
 
 return (
   <div>
     {check ? (<h1>참</h1>):(<h1>거짓</h1>) }
   </div>
 );
}
 
export default App;

내부에서 if문은 사용 불가능 하지만 삼항연산자는 사용 가능하다.

import React from 'react';
import './App.css';
 
function App() {
 let check:boolean = true;
 let text:String = "";
 
 if (check) {
   text = "참";
 }
 else {
   text = "거짓";
 }
 
 return (
   <div>
     <h1>{text}</h1>
   </div>
 );
}
 
export default App;

if를 쓰고 싶다면 밖에서 쓰면 될것 같다.

 

# style

function App() {
 let name:string = "리액트";
 let style:object = {
   color:'aqua' ,
   fontSize:'48px'
 }
 
 return (
   <div>
     <h1 style={style}>{name}</h1>
   </div>
 );
}
 
export default App;

style 도 적용할 수 있습니다. 그런데 인텔리센스가 동작하지 않아서 이 방법은 잘 안사용 할듯 합니다.

 

https://jinibh.tistory.com/709

리액트 타입스크립트 - 셀프 개발자 코딩 부트캠프