본문 바로가기
개발/웹 개발

Day 20: React 기초 (JSX와 생명주기)

$ecu_Log 2024. 8. 24.

1. 오늘의 학습 목표

학습 목표: 전 세계적으로 가장 인기 있는 UI 라이브러리인 React의 기본 철학을 이해합니다. JavaScript를 확장한 문법인 JSX를 사용하여 컴포넌트를 작성하는 방법을 배우고, 컴포넌트가 생성되고 사라지기까지의 과정인 생명주기(Lifecycle)의 기본 개념을 이해합니다.

핵심 요약: React는 Day 19에서 배운 컴포넌트 기반 아키텍처를 매우 효율적으로 구현하는 도구입니다. JSX를 통해 우리는 마치 HTML을 작성하듯 직관적으로 UI 구조를 선언할 수 있습니다.

2. 핵심 개념 파헤치기

2.1. React란 무엇인가?

React는 페이스북(현 메타)에서 개발한 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. React는 선언형 프로그래밍 방식을 채택하여, "어떻게" 그릴지를 일일이 명령하는 것이 아니라 "무엇을" 그릴지만 선언하면 데이터가 변경될 때마다 알아서 화면을 효율적으로 업데이트해 줍니다

 

2.2. JSX란?

JSX는 JavaScript 코드 안에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법 확장입니다. 이는 순수한 JavaScript가 아니며, 브라우저가 이해할 수 있도록 Babel과 같은 도구를 통해 일반 JavaScript 코드로 변환(컴파일)됩니다.

왜 JSX를 사용하는가?

  1. 직관성: HTML 구조와 JavaScript 로직을 한 파일에 함께 작성하여 컴포넌트의 전체 모습을 파악하기 쉽습니다.
  2. 표현력: 마크업 안에 {}를 사용하여 JavaScript 변수나 표현식을 직접 삽입할 수 있어 동적인 UI를 만들기 편리합니다.

 

2.3. 컴포넌트 생명주기

React 컴포넌트는 생성되고, 데이터 변경에 따라 업데이트되며, 마지막으로 화면에서 사라지는과정을 거칩니다. 이를 컴포넌트의 생명주기라고 합니다

  • Mounting (생성): 컴포넌트가 처음으로 DOM에 삽입될 때입니다
  • Updating (업데이트): 컴포넌트의 props나 state가 변경되어 화면이 다시 렌더링될 때입니다.
  • Unmounting (소멸): 컴포넌트가 DOM에서 제거될 때입니다

과거에는 클래스형 컴포넌트에서 각 생명주기 단계에 맞는 메서드(예: componentDidMount)를 사용했지만, 현대 React에서는 함수형 컴포넌트와 Hook(다음 시간에 배울 useEffect)을 사용하여 이 생명주기 관련 작업을 더 간편하게 처리합니다.

3. 코드로 배우기

3.1. 구현 목표

별도의 개발 환경 설정 없이, 브라우저에서 직접 React와 JSX를 실행할 수 있는 HTML 파일을 만들어 간단한 "Hello, React!" 컴포넌트를 렌더링합니다.

 

3.2. [1단계: React 실행을 위한 HTML 환경 설정]

react, react-dom 라이브러리와 JSX를 변환해 줄 babel 스크립트를 CDN을 통해 불러옵니다. JavaScript 코드 타입을 text/babel로 지정해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <script crossorigin src="[https://unpkg.com/react@17/umd/react.development.js](https://unpkg.com/react@17/umd/react.development.js)"></script>
  <script crossorigin src="[https://unpkg.com/react-dom@17/umd/react-dom.development.js](https://unpkg.com/react-dom@17/umd/react-dom.development.js)"></script>
  <script src="[https://unpkg.com/@babel/standalone/babel.min.js](https://unpkg.com/@babel/standalone/babel.min.js)"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    //여기에 React 코드를 작성합니다.
  </script>
</body>
</html>
 

3.3. [2단계: JSX로 React 컴포넌트 만들기]

name이라는 속성(Props)을 받아 인사말을 보여주는 Greeting이라는 함수형 컴포넌트를 작성합니다. 이것이 바로 JSX 문법입니다.

//<script type="text/babel"> 태그 안에 작성
function Greeting(props) {
  //{}를 사용해 JavaScript 변수를 JSX 안에 삽입
  return <h1>Hello, {props.name}!</h1>;
}

 

3.4. [3단계: 컴포넌트를 DOM에 렌더링하기]

ReactDOM.render()를 사용하여 우리가 만든 Greeting 컴포넌트를 <div id="root"> 안에 실제로 그려 넣습니다.

//<script type="text/babel"> 태그 안에 작성
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(
    //컴포넌트를 HTML 태그처럼 사용하고, 속성으로 데이터를 전달
  <Greeting name="React" />,
  document.getElementById('root')
);

4. 전체 코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>React Basics with JSX</title>
  <!-- 1. React 라이브러리 로드 -->
  <script crossorigin src="[https://unpkg.com/react@17/umd/react.development.js](https://unpkg.com/react@17/umd/react.development.js)"></script>
  <script crossorigin src="[https://unpkg.com/react-dom@17/umd/react-dom.development.js](https://unpkg.com/react-dom@17/umd/react-dom.development.js)"></script>
  <!-- 2. JSX 변환을 위한 Babel 로드 -->
  <script src="[https://unpkg.com/@babel/standalone/babel.min.js](https://unpkg.com/@babel/standalone/babel.min.js)"></script>
</head>
<body>
  <!-- 3. React 컴포넌트가 렌더링될 DOM 컨테이너 -->
  <div id="root"></div>

  <!-- 4. React 코드 작성 (type="text/babel" 필수) -->
  <script type="text/babel">
    //'props'라는 객체를 통해 부모로부터 데이터를 전달받는 함수형 컴포넌트
    function Greeting(props) {
      // JSX를 반환하여 UI를 정의
      return <h1>Hello, {props.name}! Welcome to the world of React.</h1>;
    }

    //ReactDOM이 'Greeting' 컴포넌트를 'root' div에 렌더링
    ReactDOM.render(
      <Greeting name="React Developer" />,
      document.getElementById('root')
    );
  </script>
</body>
</html>
 

    // 'props'라는 객체를 통해 부모로부터 데이터를 전달받는 함수형 컴포넌트
    function Greeting(props) {
      // JSX를 반환하여 UI를 정의
      return <h1>Hello, {props.name}! Welcome to the world of React.</h1>;
    }

    // ReactDOM이 'Greeting' 컴포넌트를 'root' div에 렌더링
    ReactDOM.render(
      <Greeting name="React Developer" />,
      document.getElementById('root')
    );
저작자표시 비영리 변경금지 (새창열림)

'개발 > 웹 개발' 카테고리의 다른 글

Day 22-23: 클라이언트 사이드 라우팅과 전역 상태 관리  (1) 2024.08.27
Day 21: React Hooks (useState와 useEffect)  (0) 2024.08.24
Day 19: 컴포넌트 기반 아키텍처 (CBA)  (2) 2024.08.22
Day 18: ES6+ 필수 문법  (0) 2024.08.21
Day 17: JavaScript 비동기 (Async/Await)  (1) 2024.08.20

'개발/웹 개발' 관련글

티스토리툴바