[React1] JSX

JSX element

HTML문법을 JavaScript 코드 내부에 써주면 그것이 바로 JSX .js 파일 어디에서나 필요한 곳에 작성 가능. 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있음,

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>
};

JSX attribute

속성명은 class이지만 JSX에서는 className을 사용. 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있으니 react 공식문서를 참조. React 공식 문서

Self-Closing Tag

JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다. < input>과 같이 하나의 태그가 요소인 경우에는 < input />와 같이 항상 /으로 끝내줘야 함.

Nested JSX

1. 필수!! 소괄호로 감싸기

const good = (
<div>
    <p>hi</p>
</div>
);

중첩된 요소를 만들려면 () 소괄호로 감싸기

2. 필수!! 항상 하나의 태그로 시작

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);

아래와 같이 처음 요소고 sibling이면 안됨.

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);

Rendering

html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 함.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

ReactDOM.render 함수를 사용
첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고,
두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달