TIL 14. React 1 - JSX

주민콩·2020년 11월 2일
0

React란 React는 JavaScript 라이브러리이다.

JSX ?


const hi = <p>Hi</p>
JavaScript일까요? HTML일까요? 둘 다 아닙니다.
왜냐하면 JSX는 JavaScript 확장버전입니다. 🙅🏻‍♀️🙅🏻‍♀️
HTML과 아주 비슷하게 생겼고 JavaScript 파일 내에서 작성 할 수 있습니다.
한마디로 HTML파일은 더이상 React내에서는 쓰지 않습니다.

JSX element

HTML 문법을 JavaScript 코드 내부에 써주면 그게 바로 JSX !!

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

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

JSX attribute

태그에 속성을 주고 싶을 때는 항상 "" (쌍따옴표)로 감싸줘야 합니다.
또한 이전에는 class 라고 값을 주었지만 React 에서는 className을 사용해야 합니다.

const hi = <input readOnly={true} />;

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

Self-Closing Tag

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

<div /> = <div></div> 같은표현입니다.

Nested JSX

JSX에서는 항상 지켜줘야 하는것이 있습니다.
1_소괄호로 감싸기

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

중첩된 요소를 만들려면 () 소괄호로 감싸야 합니다!

2_항상 하나의 태그로 시작

const wrong = (
<p>list1</p>
<p>list2</p>
);

위의 태그 방식은 잘못 되었습니다.
제일 처음 요소가 sibling 이면 안됩니다. 무조건 하나의 태그로 감싸져야 합니다.

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

위 코드 처럼 첫 요소는 하나의 태그로 감싸줘야합니다.

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

하지만 className을 주는 경우가 아니라면 빈태그도 가능합니다.

Rendering

HTML요소, React요소 등의 코드를 눈으로 볼 수 있도록 그려지는 것을 렌더링이라고 합니다.

React요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다.

첫 번째 인자에는 JSX로 React요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
profile
코딩하면서 기록하는 메모장 ᰔ

0개의 댓글