1일차) CRA를 통한 프로젝트 생성, 간단한 JSX 문법

CRA을 통한 프로젝트 생성

npx create-react-app my-app  
cd my-app  
npm start (or yarn start)

npm이 아닌 npx를 사용하는 이유 :

npm을 이용해 전역 설치를 할 경우 최신버전으로 업그레이드를 수동으로 해줘야 한다. 특히 React는 업데이트가 매우 빈번하기 때문에 npm으로 설치할 경우 버전관리가 어렵다.
하지만 npx는 최신버전의 CRA를 일시적으로 설치 후 실행한 다음 바로 삭제시키기 때문에 CRA에 대한 버전 관리를 할 필요성이 없어진다.

 

---

JSX 문법

1. 열린 태그는 반드시 닫아줘야 함 ex) br, input 등을 포함한 모든 태그

2. 두 개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸져야 함

   <div>
       <div>
           Hello
       </div>
       <div>
           Bye
       </div>
   </div> { /* 또는 <Fragment></Fragment>를 사용*/ }

3. 자바스크립트의 값을 사용하고 싶을 때에는 {} 사용

   <div>
       {name}, hello!
   </div>

4. 조건부 렌더링

   • 삼항연산자 사용 (true, false 둘 다 동작)

      <div>
          {
                 1 + 1 === 2 
                   ? (<div>맞아요!</div>)
                   : (<div>틀려요!</div>)
           }
      </div>

   • AND 연산자 사용 (true 일때만 동작)

      <div>
          {
              1 + 1 === 2 && (<div>맞아요!</div>)
          }
      </div>

   • 복잡한 조건 (IIFE(즉시실행함수) 사용)

      <div>
          {
              (function() {
                  if (value === 1) return (<div>하나</div>);
                  if (value === 2) return (<div>둘</div>);
                  if (value === 3) return (<div>셋</div>);
              })()
          }
      </div>

5. Style은 객체로 표현

   const style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '12px'
    };
   
    return (
      <div style={style}>
        hi there
      </div>
    );

6. HTML에서의 class 속성은 className으로

   <div className="App">
    리액트
   </div>

7. 주석

   <div>
    {/* 주석은 이렇게 */}
    <h1
    // 태그 사이에
    >리액트</h1>
   </div>