리액트에서 jsx문법이 어떻게 사용되나요?

JSX란?

• Javascript에 XML을 추가한자바스크립트의 확장 문법
• 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨
  자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점이자, 이를 사용하는 이유가 됩니다.

JSX 문법의 특징 및 준수사항

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 한다.

• JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
  ◾ JSX에서는 class 대신 className을 사용한다.
  ◾ JSX스타일링 시
  ▫ 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다. style={{속성 : 값}}
  ▫ 카멜 표기법으로 작성해야 한다 (font-size => fontSize)

  <div className="main-bg"
        style={{backgroundImage: "url(/assets/images/main-all.jpg)"}}>
  </div>

• JSX에서는 반드시 닫아주는 태그를 작성해야 한다. <tagname/>
  - img, input, br과 같은 단독 태그들도 반드시 닫아줘야 함

• JSX 내에서 주석을 작성할 때에는 { /* … */ } 와 같은 형식으로 작성한다.

• 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.
  

• if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.

## 리액트에서 자주 쓰는 if문 작성 패턴

1) 컴포넌트 안에서 쓰는 if문

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } 
    return null;  
} 

2) JSX안에서 쓰는 삼항연산자

조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

3) && 연산자로 if 역할 대신하기
- 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남음
- 왼쪽 조건식이 false면 false가 남음(false가 남으면 HTML로 렌더링하지 않음)

function Component() {
  // 만약에 이 변수가 참이면 <p></p>를 이 자리에 출력, 참이 아니면 null출력"
  return (
    <div>
      { 1 === 1 && <p>참이면 보여줄 HTML</p> }
    </div>
  )
}

참고) js *&&연산자

• AND 연산자는 첫 번째 falsy를 반환.
• 피연산자에 falsy가 없다면 마지막 값을 반환

  true && false; //false
  true && true; //true
  true && '안녕'; //안녕
  false && '안녕'; //false
  true && false && '안녕'; //false

참고페이지

https://codingapple.com/course-status/
https://goddaehee.tistory.com/296