220318 React JSX

JSX

• 공식 문서에는 문자열도 아니고 태그도 아니며
  자바스크립트를 확장한 문법이라고 한다
• 이해하기 쉽게 설명하면 HTML을 품은 JS === JSX!
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트의 문법으로 변환된다

  • 바벨은 JSX를 React.createElement( ) 호출로 컴파일한다

• 리액트에서는 JSX 문법을 사용하여 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다

JSX 문법

• 태그는 꼭 닫아주기

import logo from "./logo.svg";
import "./App.css";

function App() {
  let name = "nuri"

  return (
    <div id="id" className="App">
      {name !== "1" ? name : "1"}
      {name}
      <p style = {{color: "orange", fontSize: "20px"}}>안녕하세요. 리액트 반입니다! :)</p>
      <input type="text" />
    {/* </div> */} // 이 부분 주목!!!!
  );
}

export default App;

• 무조건 1개의 엘리먼트만 반환하기
  • 반드시 부모 요소 하나가 감싸는 형태여야 한다는 말과 같다

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

return (
<p>안녕하세요! 리액트 반입니다 :)</p>
<div className="App">
<input type='text'/>
</div>
);

• JSX에서 JavaScript 값을 가져오거나 표현식을 쓰고 싶다면
  {} 중괄호를 사용하면 된다

      <p style = {{color: "orange", fontSize: "20px"}}>안녕하세요. 리액트 반입니다! :)</p>

- 스타일은 딕셔너리로 넘겨줘야 하기 때문에 {} 중괄호 1번
- 자바스크립트 표현식을 쓰고 싶다면 중괄호를 사용해야하기 때문에 중괄호 {} 1번
- 총 2번의 중괄호를 사용한다

• class 대신 className

    <div id="id" className="App"> //id는 id로 사용한다

• React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용

<p style = {{color: "orange", fontSize: "20px"}}>안녕하세요. 리액트 반입니다! :)</p>

==> Html : font-size
==> React : fontSize

• 인라인으로 styel 주기

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있다
function App() {
	const styles = {
		color: 'orange',
		fontSize: '20px'
	};
	return (
		<div className="App">
			<p style={styles}>orange</p>
		</div>
	);
}

• React에서 주석처리 방법
  • JSX 내에서 {/…/} 와 같은 형식을 사용 한다.

return (
    <div id="id" className="App">
      {/* <input type="text" /> */} // 주목!!!!!
    </div>
  );