템플릿 설명

앞으로 사용할 Template의 구조에 대해서 살펴본다.

Template 코드에 대한 설명은 다음과 같다.

Application 영역 생성

<div id="app"></div>

애플리케이션의 기본 영역을 HTML 태그로 생성한다. 일반적으로 div로 작성한다. 이 영역을 지정하여 React Application을 생성할 것이며, id 등은 다른 값으로 해도 무방하다.

React CDN

CDN은 개발용과 배포용으로 나뉜다. 개발용은 React 개발도구를 사용할 수 있어 디버깅이 용이하다.

필요한 부분을 제외한 다른 CDN은 주석 처리하여 사용한다.

<!-- 개발용 CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- 배포용 CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

Babel CDN

Babel · The compiler for next generation JavaScript

Babel은 ECMAScript 2015+ (ES6+) 코드를 이전 Javascript 엔진에서 실행할 수 있도록 변환하는데 사용하는 트랜스컴파일러이다. 따라서 Babel을 사용하면 웹 개발자는 환경과 상관없이 최신 자바스크립트를 사용할 수 있다.

- Wiki백과(https://en.wikipedia.org/wiki/Babel_(transcompiler))

JSX나 클래스 문법등을 사용하기 위해서 필수적으로 Babel 설정이 있어야 한다.

<!-- 바벨 CDN(using JSX) -->
<script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>

또한 스크립트 생성 시 text/babel로 설정한다.

<script type="text/babel">

</script>

Application 생성

생성한 script에 코드를 작성하여 React Application을 생성한다. 미리 만들어둔 영역을 Root로 설정한다.

변수 선언은 let과 const 키워드로 하며, 해당 내용은 let, const 문서를 참고한다.

const app = ReactDOM.createRoot(document.querySelector("#app"));

아래 코드는 구 버전 코드이다.

ReactDOM.render(<h1>Welcome to React!</h1>, document.querySelector("#app"));

Render

생성한 애플리케이션이 저장된 변수를 사용하여 화면을 생성할 수 있다.

app.render(/*JSX코드*/);

다음과 같이 환영 메세지를 태그로 작성하여 렌더링한다.

app.render(<h1>Welcome to react!</h1>);

React는 순수 HTML이 아닌 JSX(JavaScript XML) 형태를 렌더링한다. 핵심만 짧게 요약하면 자바스크립트 문법으로 HTML을 생성하는 것이다. 이 때 권장하는 규칙이 있다.

• DOM 구조에 맞게 하나의 Root 태그를 생성하라

즉, 다음과 같은 형태는 잘못된 JSX 형태이다.

app.render(
    <h1>Welcome to react!</h1>
    <p>react is awesome</p>
);

이 경우 태그를 추가하여 하나로 묶어주는 것을 권장한다.

app.render(
    <div>
        <h1>Welcome to react!</h1>
        <p>react is awesome</p>
    </div>
);

만약 묶어줄 태그가 마땅히 없다면 다음과 같이 Fragment로 처리할 수 있다.

app.render(
    <Fragment>
        <h1>Welcome to react!</h1>
        <p>react is awesome</p>
    </Fragment>
);

Fragment는 다음과 같이 간소화 하여 작성할 수 있다.

app.render(
    <>
        <h1>Welcome to react!</h1>
        <p>react is awesome</p>
    </>
);

개발 단계에서 하위 컴포넌트의 변동사항까지 모두 검사하며 진행하고 싶다면 다음과 같은 Root 설정도 가능하다.

app.render(
    <React.StrictMode>
        <h1>Welcome to react!</h1>
        <p>react is awesome</p>
    </React.StrictMode>
);