[ReactJS] JSX란?

JSX란?

 

• React에서 component는 꼭 저런 형식으로 작성이 되어야 하는데, 이 때 Javascript와 HTML이 합쳐진 문법
• 일종의 자바스크립트의 확장된 문법
• JSX는 React로 개발할 때 주로 사용이 되며, 공식 자바스크립트의 문법이라고 할 수는 없음

 

 

 

 

JSX의 작성 방법

• Javascript 언어 사용

 

        JSX 내부에서 Javascript 언어를 사용하기 위해서는 { }로 코드를 감싸주어야 한다.

 

요렇게 말이다.

 

 

• div로 요소 묶기

 

        하나의 컴포넌트 안에 여러 개의 요소가 존재하면 div 태그로 묶어주어야 한다.

 

// 잘못된 코드
function App(){
  return(
      <h1>Hello</h1>
      <h2>bad code</h2>
    )
}

// 올바른 코드
function App(){
  return(
      <div>
          <h1>Hello</h1>
          <h2>good code</h2>
        </div>
    )
}

 

 

조건 연산자

 

            삼향 연산자라고도 불리며, 자바 스크립트에서 세 개의 피연산자를 받는 유일한 연산자.

 

이렇게 작성할 수 있다.

 

 

   ☆  JSX 내부의 자바 스크립트 표현식에서는 if 문을 사용할 수 없다. 

 

 

        조건문을 사용하기 위해서는

 

            (1)   JSX 밖에서 코드를 짠 뒤, 내부로 불러오는 방식으로 활용하거나

            (2)   { } 안에 조건 연산자를 사용하면 된다.

 

 

function App(){
  const animal = 'puppy';
  return(
      <div>
          {animal === 'puppy'? (<h1>If puppy, show this</h1>) : (<h2>Its not puppy</h2>)}
        </div>
    )
}

 

▲

조건 연산자를 사용한 간단한 예시이다.

 

 

 

---

 

 

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders