1. React JSX란.

React에서 사용하는 JSX는 자바스크립트 확장 문법이다.
JSX는 번들러를 통하여 자바스크립트 형태로 변환, 브라우저에 실행되게 된다.

장점
뛰어난 가독성과 HTML 태그를 이용한 높은 활용도

• 규칙

1. 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 하기에 요소들은 부모 요소에 포함되어야 한다.

• React는 v16 이후 부모요소로 사용할 수 있도록 Fragment를 제공한다.

• Fragment는 <> </>로 줄여 사용이 가능하다.

  return(
  	<div>
  		<h1>요소1</h1>
  		<h1>요소2</h1>
  	</div>
  )

2. React에서 JavaScript를 사용을 해야 할 경우 { }를 이용하여 사용이 가능하다.

<h1>{name}입니다.</h1>

• Es6의 const와 let

• const는 한번 지정되고 나면 변경이 불가능한 상수

  • let은 동적인 값을 담을 수 있는 변수

  • var은 scope이 함수 단위이며, let과 const는 그렇지 않다.

    • scope : 해당 값을 사용하는 코드 영역

var a = 1
 let b = 1
	if(true){
		let a = 2;
		var b = 2;
		console.log(a + “ ” + b);
 	}
 console.log(a + “ ” + b);

• let과 const는 같은 블록 내부에서 중복 선언이 불가능하다. (값이 유동적일 경우 let을 값이 변할 수 없을 때는 const를 사용한다.)

3. JSX 내부엔 if문을 사용할 수 없다. if문이 필요할 경우 JSX외부에서 사용하거나, {} 안에 삼항연산자(조건부 연산자)를 이용하여 값을 설정할 수 있다.

4. 화면에 보여주거나, 보여주지 않는 기능을 사용할 경우 AND 연산자(&&)를 사용하면 조건부 렌더링을 좀 더 간편하게 사용할 수 있다. (리엑트에서는 0이 아닌 false를 null과 같이 인식)

삼항연산자 : { name == “가나다” ? <h1>h1</h1> : null }
AND연산 :  { name == “가나다” && <h1>h1</h1> }

5. 리엑트 컴포넌트에서 undefined값을 반환하여 렌더링 할 경우 에러가 발생하게 되며, 값이 undefined일 경우 ::을 사용하여 값을 대치시킬 수 있다.

return name :: ‘undefined’;

6. 리엑트에서 DOM요소에 스타일을 적용 시 문자열 형태로 넣는 게 아니라 객체 형태로 넣어야 한다. 이때 스타일은 카멜 표기법을 사용한다.(BackgroundColor 등)
   — 스타일 선언 후 지정

const style = {

     backgroundColor : ‘black’,

     color : ‘white’

}

— 스타일 값 즉시 지정

<div style={{ backgroundColor:’black’, color:’white’ }}></div>

7. React에서 클래스는 class가 아닌 className = “name” 형식으로 지정한다.

8. 주석은 { /* */ } 형식으로 작성한다.