번들(bundler)는 묶는다는 뜻 즉 파일을 묶듯이 연결하는 것
대표적인 번들러는 웹팩, Parcel, browserify 등이 존재 리액트 프로젝트에서는 웹팩을 사용하는 추세임
왜 웹팩을 사용하는가?
편의성과 확장성이 다른 도구보다 뛰어나기 때문
번들러 도구를 사용하면 import로 모듈을 불러왓을 때 불러온 모듈을 모듀 합쳐서 하나의 파일을 생성해줌
리액트의 import는 javascript 의 import와는 다름 리액트의 import는 다른 파일들(svg, css)도 불러올 수 있음

JSX란?

자바스크립트의 확장문법이며 XML과 매우 비슷하게 생겼음.
아래는 JSX code

function App() {
	return (
      <div>
        Hello <b>react</b>
      </div>
      );
}

위와 같은 JSX코드는

function App() {
	return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

이렇게 변환됨
즉 컴포넌트를 렌더링 할때마다 JSX코드가 아닌 React.createElement함수를 사용해야한다면 매우 불편함

JSX의 장점

1. 보기쉽고 익숙하다.
   • 가독성이 좋음
2. 더욱 높은 활용도
   • 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있음

JSX의 문법

1. 컴포넌트에 여러요소가 있다면 반드시 부모 요소 하나로 감싸야함

function() {
	return(
    <div> {/*이렇게 감싸줘야함 꼭 div태그가 아니더라도 <>라는 fragment 라는 기능을 사용하면 됨 사용하려면 improt {Fragment} from 'react';*/}
        <h1>리액트</h1>
        <h2>react</h2>
    </div>
    )
}

왜 부모요소로 감싸야하는가?
Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문

JSX내부에서 if 문을 사용할 수 없음
사용하고 싶다면? JSX밖에서 if문을 사용하여 사전에 값을 설정하거나, {} 안에 조건부 연산자를 사용하면 됨 즉 삼항연산자

function() {
  const name = 'react';
	return(
      <>
        {name === 'react' ? (
        <h1>리액트입니다.</h1>
         ) : (
        <h2>리액트가 아닙니다.</h2>
        )}
      </>  
    )
}

또다른 방법 &&연산자를 사용한 조건부 렌더링

function() {
  const name = 'react';
	return(
      <>
        {name === 'react' ? (
        <h1>리액트입니다.</h1>) : null}
      </>  
    )
}

조건에 따라 아무것도 렌더링을 하지않아야 할 때
위와같이 null 을 렌더링하면 되지만
아래와 같이 &&연산자를 사용하면 조건부 렌더링을 더 쉽게할 수 있음

function() {
  const name = 'react';
	return(
      <>
        {name === 'react' && <h1>리액트입니다.</h1>}
      </>  
    )
}

&& 연산자를 사용할 때 주의해야할 점?
falsy한 값인 0은 예외적으로 화면에 나타남
ex)

const number = 0; 
return number && <div>내용</div>  // 0이 화면에 나타남

undefined 를 렌더링 하지않기

function() {
  const name = undefined;
  return name; // 여기서 || 연산자를 사용해서 반환을 막을 수도 있음
}

이렇게 작성하면 에러가 뜸

jsx 내부에서 undefined 를 반환하는 것은 괜찮음

function() {
  const name = undefined;
  return <div>{name}</div> {/*jsx내부에서는 이렇게 작성해도 오류 발생하지 않음*/}
}

인라인 스타일링을 할 때에는 - 를 사용하면 안됨

왜? 아마도 javascript문법과 유사하기 때문에 javacript의 연산자와 같기 때문 즉 font-size(x) fontSize(o)

jsx에서는 class 가 아닌 className으로 사용해야함

JSX 에서는 태그를 닫아줘야함

html작성할 때 인풋태그는 안닫아도 되는데 jsx내부에서는

<input>
</input>

<!--또는 -->

</input>

이렇게 꼭 닫아줘야함

주석 작성법

{/**/}
{/*이렇게 작성해야합니다*/}