지난 시간까지 타입스크립트에 대해 배웠어요. 이번 시간부터는 타입스크립트를 활용한 리액트의 기본 동작 원리와 프로젝트 생성 방법, 그리고 JSX 문법에 대해 정리해 볼게요.
리액트 (React)
리액트는 프레임워크가 아닌, 웹과 네이티브 인터페이스를 만들기 위한 라이브러리예요. 페이스북에서 개발했어요.
리액트가 프레임워크가 아닌 라이브러리로 분류되는 이유는 다음과 같아요.
- 내장 기능이 부족하고 서드 파티 패키지에 의존해요.
- 완전한 생태계와 디자인 시스템을 제공하지 않기 때문에, 리액트로 만들어진 프로젝트의 형태가 매우 다양해요.
- 프로젝트에 적합한 설계에 따라 개발자가 원하는 도구를 자유롭게 선택할 수 있어요.
SPA (Single Page Application)
리액트의 주요 특징 중 하나인 SPA는 비동기로 필요한 데이터만 받아와서 현재 화면을 동적으로 다시 렌더링하는 방식이에요. 화면 전체를 새로고침하는 것이 아니라 필요한 영역만 변화를 주기 때문에 사용자의 몰입감을 높일 수 있어요.
참고로 리액트 공식 사이트는 이전 버전(legacy) 문서와 현재 버전(react.dev) 문서 두 가지가 존재하니 정보를 찾을 때 알아두시면 좋아요.
리액트의 동작 원리
리액트는 가상 DOM을 활용해 화면을 효율적으로 업데이트해요.
1. 초기 렌더링: 첫 화면을 렌더링해요.
2. 가상 DOM 변경: 데이터에 변화가 생기면 해당 부분을 파악하고 가상 DOM을 먼저 변경해요.
3. 재조정 (Reconciliation): 변경된 가상 DOM과 실제 DOM을 비교하여 동기화할 부분을 찾아요.
4. 실제 DOM 업데이트: 가상 DOM과 동기화된 부분만 실제 DOM에 반영하여 업데이트해요.
프로젝트 생성
터미널 명령어를 통해 리액트 프로젝트를 생성할 수 있어요.
# 자바스크립트 기반 프로젝트 생성
npx create-react-app 프로젝트명
# 타입스크립트 기반 프로젝트 생성
npx create-react-app 프로젝트명 --template typescriptJSX (TSX) 문법
JSX는 자바스크립트를 확장하여 파일 내부에서 HTML 문법을 사용할 수 있게 해주는 문법이에요. 타입스크립트 환경에서는 파일 확장자로 .tsx 를 사용해요.
export default function App() {
let name = 'younha';
let inlineStyle = {
fontSize: '48px',
color: 'white',
backgroundColor: 'black'
};
return (
<>
{/* JSX 내부의 주석은 이렇게 작성해요. */}
{/* JSX는 항상 하나의 부모 태그로 감싸서 반환해야 해요. */}
<h1> JSX </h1>
{/* HTML 내부에서 중괄호를 사용하면 자바스크립트 변수나 표현식을 사용할 수 있어요. */}
<p> {name} </p>
{/* 자바스크립트의 삼항 연산자를 활용한 조건부 렌더링이에요. */}
{name === 'nulzi' ? <p> 환영합니다. </p> : <p> 누구세요? </p>}
{/* HTML의 class 속성은 className 이라는 이름으로 사용해요. */}
<div className='hidden'></div>
{/* 인라인 스타일은 객체 변수로 넘겨주어야 하며, CSS 속성명은 카멜케이스(camelCase)로 작성해야 해요. */}
<div style={inlineStyle}></div>
{/* JSX 내부에서는 br 태그와 같이 내용이 없는 태그도 항상 닫는 태그가 필요해요. */}
<br />
</>
);
}