JSX 문법 정리

⚡IF 대신 삼항연산자

function App() {
  const name = "리액트"
  return (
    <>
      {name === "리액트" ? ( <h1>리액트에용</h1> ) : ( <h1>리액트아니에용</h1>) }
    </>
  );
}

삼항연산자는 많이 사용하던거라 익숙한데

괄호 표기가 살짝 안익숙하네요

 

삼항연산자는 조건문이 참일 경우 : 왼쪽에 있는 코드를 실행하고

참이 아닌 경우 : 오른쪽에 있는 코드를 실행합니다.

 

근데 삼항연산자 자체가 JS문법이다보니 삼항연산자 전체를 {}로 묶어서 처리하는군요

 

function App() {
  const name = "리액트"
  return (
    <>
      {name === "리액트" ?
      (
      <>  
        <h1>리액트에용</h1>  
        <h2>근데용</h2>
      </>
      )
      :  
      
      <h1><h3>리액트아니에용</h3></h1> }
    </>
  );
}

 

리턴하는 html 태그가 한줄이면 ()를 생략해도 사용가능하지만

그게 아닌 경우에는 ()로 감싸주어야하네요

 

---

 

 

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

function App() {
  const name = "리트"
  return (
    <>
      { name === "리액트" && <h1>리액트입니다</h1>}
    </>
  );
}

위와 같은 코드를 작성하면 name === 리액트가 false일때는

아무것도 나타나지않고 name===리액트가 true일때는 리액트입니다 문구가 나타납니다.

 

이거 왜 됨?

react에서 false를 렌더링 할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문임
하지만 falsy한 값인 0은 예외적으로 화면에 나타납니다.
뭔소리냐구용?

 

function App() {
  const name = 0
  return (
    <>
      { name && <h1>리액트입니다</h1>}
    </>
  );
}

 

이런 코드를 짜면 화면에 0이 표시됩니다.

 

---

 

🔍Undefined 렌더링 하지 않기

 

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링 하는 상황엔

오류가 발생합니다.

function App() {
  const name = undefined
  return name
}

예컨대 위와같은 코드는 nothing was returned from render라는 오류를 발생시켜용

 

그런데 만약 어떤 값이 undefined일수도 있다면 OR연산자를 이용해 값을 지정할 수 있습니다.

function App() {
  const name = undefined
  return name || "값이 undefined입니다."
}

위와 같은 코드는 문제없이 동작합니다.

실행시키면 값이 undefined입니다가 표기된 브라우저를 볼 수 있어용

 

 

import './App.css';
import { Fragment } from 'react'


function App() {
  const name = undefined
  return <>{name}이에요</>
}

export default App;

이렇게 코드를 작성하면 

undefined는 화면에 표기되지않고 이에요라는 텍스트만 표기되네용

 

---

🔍인라인 스타일링

리액트에서 dom 요소에 스타일을 적용할 때는 문자열 형태로 넣는게 아니라

객체 형태로 넣어주어야합니다. 

또한 -문자를 없애고 카멜표기법으로 작성해야합니다

 

1. 객체형태

2. -문자 사용 x

 

즉 이렇게 코드를 작성합니다.

import './App.css';
import { Fragment } from 'react'


function App() {
  const name = "리액트"
  const style = {
    backgroundColor : 'black',
    color : 'aqua',
    fontSize : '48px',
    fontWeight : 'bold'
  }

  return <div style = {style}> {name}</div>
}

export default App;

style은 객체형태로 만들어주고

background-Color같이 중간에 -가 들어가는 요소들의 -를 제거하고 작성하네요

---

🔍Class 대신 ClassName

 

jsx에서는 class가 아닌 className으로 설정해주어야합니다.

function App() {
  const name = "리액트"
  const style = {
    backgroundColor : 'black',
    color : 'aqua',
    fontSize : '48px',
    fontWeight : 'bold'
  }

  return <div style = {style} className = "react"> {name}</div>
}

class 로 설정해도 적용되기는 하지만

그렇게 사용하면 콘솔탭에 경고가 나타납니다.

---

🔍꼭 닫아야하는 태그

input태그와 같이 html에서는 굳이 닫지않아도 되는 태그들도

리액트에서는 닫아주어야합니다.

 

다만 태그 사이에 별도의 내용이 들어가지 않는 경우 다음과 같이 작성할 수 있어요

<input/>

이런 작성방식을

self-closing 태그라고 부릅니다.

---

🔍주석은 어떻게 담?

function App() {

  return (
    <>
      {/* 주석은 이렇게*/}
    </>
  )
}

만약 자바스크립트에서처럼

//

/* */ 안에 주석을 작성할 경우

페이지에 그대로 나타나게됩니다.

 

 

Prettier

F1 -> format document