← 기록 목록

React

React 애플리케이션의 흐름

React 애플리케이션은 HTML의 루트 요소에 컴포넌트를 렌더링한다. 프로젝트 구성에 따라 파일명은 달라질 수 있지만, index.html은 루트 요소를 제공하고 index.js는 애플리케이션을 시작하는 역할을 한다.

<div id="root"></div>

App은 화면을 구성하는 최상위 컴포넌트다. 함수형 컴포넌트는 JSX를 반환하고, 클래스형 컴포넌트는 render() 메서드에서 JSX를 반환한다.

function App() {
  return <h1>개발 기록</h1>;
}

JSX란?

JSX는 JavaScript 안에서 HTML과 비슷한 형태로 화면 구조를 작성하는 문법 확장이다. 서버와 데이터를 교환하는 기술은 아니다. JSX의 중괄호 안에는 JavaScript 표현식을 넣을 수 있다.

const name = '솔비';
const greeting = <h1>{name}의 개발 기록</h1>;

여러 요소를 반환할 때는 하나의 부모 요소나 Fragment로 묶는다. HTML의 class 대신 className을 사용하며, 태그는 닫아야 한다.

React와 Ajax의 관계

React는 사용자 인터페이스를 구성하는 라이브러리이고, Ajax는 페이지 전체를 새로 고치지 않고 서버와 비동기적으로 통신하는 방식이다. 서로 대체하는 기술이 아니라 함께 사용할 수 있다.

React 컴포넌트에서도 Fetch API나 Axios로 서버에 요청을 보내고, 받은 데이터를 상태에 저장해 화면에 표시할 수 있다. 응답 데이터는 JSON 등 다양한 형식일 수 있다.

화면 작성 문법은 JSX, 비동기 통신 방식은 Ajax로 구분한다.

참고