2.1 코드 이해하기

webpack

번들러라고 부르며 이걸 사용 시 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한다.

babel

src/index.js 에서 파일을 다 불러와 번들링 할 예정

• ES6 → ES5 문법으로 변환
  • 구버전 웹 브라우저와 호환하기 위해서

component

function App(){ 
	return (
		<div>
			<h1>안녕</h1>	
		</div>
)}

• 이 코드는 App 이라는 컴포넌트를 만들어 준다 .
• function() 을 사용해서 함수 컴포넌트라고 부른다
• return 에는 HTML같은 코드가 있는데 , JSX라고 부른다

2.2 JSX

• JS의 확장 문법이며, XML와 유사하게 생겼다.
• 이런 형식으로 작성된 코드는 브라우저에서 실행되기 전에 바벨을 사용하여 JS 형태의 코드로 변환
  
• 자바스크립트 문법이라고 할 수 없다.

장점

1. 보기 쉽다
2. 높은 활용도

   1. HTML 태그를 사용할 수 있다.

   2. 앞으로 만들 컴포넌트도 JSX 안에서 작성 가능

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

      <App/> 이런식으로 사용 가능

      ReactDOM.render(a,b )?

      • 컴포넌트를 페이지에 렌더링하는 역할
      • 첫 값(a)는 페이지에 렌더링 할 내용
      • 두번째 값: 해당 JSX를 렌더링할 document 내부 요소 설정
        • ⇒ id 가 root인 요소 안에 렌더링을 해달라

JSX 문법

1. return 안의 내용 요소 여러 개를 하나의 요소로 감싸 줘야한다.

• Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교하도록 하나의 DOM 트리로 구성되어야 한다.
  

fuction App(){
	return (
		<div>
			<h1>하이</h1>
			<h2>헬로우</h2>
		</div>
	);
}
export default App;

• 최신 기술 Fragment (div 대신 사용)

<>
	<h1>하이</h1>
	<h2>헬로우</h2>
</>

2. 자바스크립트 표현 가능 { }

function App(){
	const name="heyhey";
	return(
		<>
			<h1>**{name}**</h1>
		</>
	)
}

3. If 문 대신 조건부 연산자

function App() {
  const name="heyhey"
  return (
    <div className="App">
      **{name==='heyhey' ? (<h1>천재</h1>) : (<h1>바보</h1>)}**
    </div>
  );
}

4. AND 연산자(&&)를 사용한 조건부 렌더링

{name==='heyhey'&& <h1>천재</h1>}

맞으면 보여주고 아니면 아무것도 나타나지 않는다.

5. undefined 해결

function App() {
  const name= undefined
  return (
    <div className="App">
        <h1>{name||'없음'}</h1>
    </div>
  );
}

{name||'없음'} OR(||) 연산자를 사용해 해당 값이 undefined 일때 사용할 값 지정 → 오류방지

6. 인라인 스타일링

스타일 적용할 때는 문자열 형태가 아닌 객체로 넣어줘야한다. → camelCase로 작성해야 한다.

font-size → fontSize

background-color→backgroundColor

<div 
	style={{ 
		backgroundColor:'black',
		color:'aqua',
		fontSize:'48px'
	}}					

7. class 대신 className

<div className="heyhey"> class 가 아니라 className!

src/App.css에서 스타일링 하기

.heyhey{
  font-size:50px;
  color:aqua;
  background-color: black;
}