React 첫 시작. JSX 문법 사용, 렌더링, 조건부 렌더링

 

JSX 문법

HTML과 비슷하지만 꼭 지켜야 할 규칙이 있다.

1. 태그는 꼭 닫혀있어야 한다. (self closing tag 사용 가능. <input ~~ /> )

2. 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다.

    ** 의미없이 <div>태그를 낭비하지 않고, <React.Fragment>라는 태그를 이용하면 html에서는 태그가 보이지 않는다.

       <></>  빈 태그도 fragment와 같은 역할을 한다.

 

조건부 렌더링

1. 삼항연산자 사용

{ 1 + 1 === 2 ? '맞다' : '틀리다' }

괄호안에서 삼항연산자 사용 가능.

 

2. & 연산자 사용

{ name === 'green' && '<div>그린이다~~<div/>' }

 

3. IIFE 방식 (함수를 선언한 다음 바로 호출)

** 화살표 함수(ES6문법) : this, arguments, super 의 개념 없음.