JSX

📋 JSX

• javascript에 XML을 추가한 JS 확장 문법이다.
• 리액트의 엘리먼트를 생성하기 위해 사용된다.
• html에서 사용되는 태그를 그대로 사용할 수 있으며 자바스크립트의 모든 기능이 포함되어 있다.
• 브라우저에서 실행하기 전에 바벨을 사용해 일반 자바스크립트 코드로 변환된다.

JSX 사용법

JSX 기본 사용법은 부모 요소 하나가 감싸는 형태여야 한다.

부모 요소가 없을 경우 아래 이미지 처럼 오류 화면을 볼 수 있다.

부모 요소로 div를 사용할 수 있지만 div를 남발할 수 있는 문제점이 있다.

div 남발 문제점을 해결하기 위해 Fragment를 사용할 수 있다.

Fragment는 짧게 <> </>로 사용할 수 있으며 화면에 렌더링 되지 않는다.

• Fragment 예시

const App = () => {
  const name1 = "Hello"
  const name2 = "React"
  return (
    <>
      <p>{name1}</p>
      <p>{name2}</p>
    </>
  )
}

JSX에는 표현식을 포함할 수 있다.
보여주고자 하는 내용을 변수에 담아 JSX 내부에서 해당 변수를 중괄호로 감싸 사용하면 된다.

• 표현식 예시

const App = () => {
  const name = "Hello React!"
  return (
    <p>{name}</p>
  )
}

JSX는 자바스크립트의 표현식을 모두 사용할 수 있는데, if나 for문은 자바스크립트의 표현식이 아니기 때문에 표현식 내부에서 사용할 수 없다.

그렇기에 표현식에서 조건문을 사용하기 위해 삼항 연산자를 사용하는 편이다.

• 삼항 연산자로 표현식 사용하기 예시

const App = () => {
  const isAdult = true;

  return (
    <>
      {isAdult ? <h1>맥주 구매 가능</h1> : <h1>맥주 구매 불가능</h1>}
    </>
  )
}

JSX에서 style 사용하기

JSX에서 style을 지정하기 위해서는 객체 형태로 작성한다.
지정할 스타일은 css 속성명을 카멜케이스로 작성한다.

const App = () => {
  const isAdult = true;

  return (
    <>
      <h1 style={{color : "blue"}}>Hello</h1>
      <h1 style={{backgroundColor : "pink", textAlign : "center"}}>World</h1>
    </>
  )
}

위 처럼 태그 내부에 바로 스타일을 지정할 수 있지만 가독성이 떨어지기 때문에 style-components를 자주 이용할 것 같다.

style-components에 관한 내용은 별도로 작성할 계획이다.

참고

노마드코더
JSX