2장 jsx

jsx:자바스크립트의 확장문법, 번들링(파일을 묶듯이 연결)되는 과정에서 바벨을 사용하여 일반 js코드로 변환.

장점: 보기 쉽고 익숙하다. 더욱 높은 활용도,

ReactDOM.render: 컴포넌트를 페이지에 렌더링하는 역할. 첫번째 파라미터는 페이지에 렌더링 할 내용을 jsx로

 두번째 파라미터는 해당 jsx를 렌더링 할 document내부요소를 설정

ReactDOM.render(<App />, document.getElementById('root'));

문법: 감싸인 요소 (return 안에 div등으로 감싸야해 virtualdom에서 효율적으로 비교하려고. <Fragment>도가능<>

자바스크립트 표현은 {}로 감싸면 된다.

const : 선언하면 재설정 불가. 

let: 재설정 가능(for문이나 유동적으로 변할 수 있을 때 사용)

if문 사용불가: 삼항 연산자를 사용. 

  const  name = '리액트';

  {name === '리액트' ? (<h1> 리액트입니다</h1>) : ( <h2> 리액트아냐</h2>) } 

AND 연산자 대신 &&사용

  {name ==='리액트' && <h1>리액트 입니다.</h2>}   단: 0은 예외.

인라인 스타일링: 객체형태로 스타일링, font-size가 아니라 fontSize style={{fontSize:'23px'}} 단위 생략하면 px로지정

 class 대신 className="react"

 self-closing: <input />

주석: {/* ~~~*/}

 

ESLint: 문법 검사 도구,