React - JSX

React 특징

1. JSX 문법
2. Components
3. Props , State
4. Conditional Rendering 조건부 렌더링
5. Create React App

---

1. JSX 란?

JSX : JavaScript를 확장한 문법

• JavaScript의 라이브러리인 React에서 사용되는 문법이다.
• React를 사용할때 JSX문법 사용이 필수는 아니다.
  하지만 가독성을 위해서 JSX문법을 사용한다.
• 보기에는 HTML로 보이지만, JavaScript코드 내부에 써진 JSX문법이다.
  밑처럼 자바스크립트 안에서 HTML<태그>를 사용할 수 있고,
  자바스크립트 {변수}를 HTML<태그> 내에서 호출할 수 있다.
• return() 안에서 쓰인다.

// 예시
const APP = () => {
  const hi = 'Hi everybody!';
  return <div>{hi}</div>;
};

• 브라우저가 이해할 수 있도록 브라우저 실행전에 Babel에 의해 JSX코드가 JS코드로 변환된다.
• 가독성과 편리성을 높여준다.
  = JSX는 React.createElement(component, props, ...children)를 호출하기 위한 마법이다.

// JSX문법
function hello() {
  return <div>Hello world!</div>;
}
// Babel에 의해 컴파일된 순수JS코드
function hello() {
  return React.createElement("div", null, "Hello world!");
}

---

2. JSX 규칙

1) 태그 정의

1. 부모요소 1개가 전체를 감싸는 형태여야 한다. <div>나 <Fragment>가 부모태그인 형태
   Virtual DOM에서 변화감지할때 비교하기 위해 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이있다.

export default function App() {
  const name = 'Haha';
  return (
    <Fragment>
      <div>{name}</div>
      <div>{name}</div>
    </Fragment>
    
  )

}

2. 닫는 태그/>를 써줘야 한다. <div></div> <img />
3. HTML 주석은 <!-- 주석 -->이지만 JSX는 {/*주석*/}으로 표기한다.

2) 속성 정의

1. class속성은 HTML의 class와 겹치므로 className으로 사용해야 한다.

<div class="list">list 1</div>     // X
<div className="list">list 1</div> // O

2. 속성에 따옴표""나 중괄호{} 중 하나만 사용가능하다.
   따옴표"" : 문자열 값에 사용
   중괄호{ } : JS표현식 변수에 사용

const element = <a href="http://www.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl} />;

3. 스타일 속성명은 카멜표기법으로 작성해야 한다.
   background-color => backgroundColor
font-size => fontSize
onclick => onClick

function App() {
	const style = {
    	backgroundColor : "red",
    	fontSize: "12px"
    }
    return (
    	<div style={style}>list 1</div>
    )

3) JSX 내부에선 조건부연산자를 사용 (if문 대신)

1. JSX 내부

• 조건부 연산자 (삼항 연산자{조건문 ? true값 : false값})를 사용

function Component() {
  return (
  	<div>
      {
        condition ? <div>true값</div> : <div>false값</div>
      }
    </div>
  )
}

2. JSX 외부

• if문 사용

function Welcome(user) {
  if(user){
  	return <h1>Hello, {formatName(user)} ! </h1>;
  }
  return <h1>Hello, Nice to meet you </h1>;
}

4) JS표현식 정의

JSX return()내부에선 {}중괄호안에 JS표현식을 넣는다.

export default function App(){
  const name = "Haha";  //js코드
  return (              //jsx문법
  	<div>
      <h1>{name}</h1>    // {} 중괄호 안에 JS값을 받아옴
    </div>
  );
}

5) map()함수 사용

• 반드시 key 속성을 넣어야 한다
  key 속성값은 가능한 데이터에서 제공하는 id를 할당한다.
• key는 불변하고 예상가능하며 유일해야 한다.
  고유한 id가 없는 경우, 배열 인덱스를 넣어 해결할 수 있는데 이는 최후의 수단일때만 사용한다.
• 변하는 key(Math.random()으로 생성된 값 등) 사용 불가 공식문서
  이를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성된다.
  계속 key값이 변하면 리소스를 잡아먹어서 무거워진다. 이로 인해 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있다.

const posts = [
  {id: 1, title: 'Hello', content: 'World'},
  {id: 2, title: 'Hola', content: 'Welcome!'}
];
function Blog(){
  const content = posts.map((post) => 
    <div key={post.id}>  // key 속성
      <h3>{post.title}</h3>                           
      <p>{post.content}</p>   
    </div>
);
  return (
    <div>{content}</div>
  );
}

참고
https://ko.reactjs.org/docs/introducing-jsx.html