프론트엔드

[소플의 처음 만난 리액트] - 01 02 03

주니빙 2024. 12. 21. 00:34

00  준비하기

HTML : 마크업(문서나 데이터를처리하기 위해 문서에 추가되는 정보) 언어의 한 종류 ⇒ 웹사이의 뼈대를 구성하기 위해서 사용하는 마크업 언어

SPA(Single Page Application) : 하나의 페이지만 존재하는 웹사이트

 

SPA는 페이지가 하나라는 것이며 이는 HTML 파일이 하나라는 뜻이다. 리액트가 동적으로 <body> 태그 내부를 채워넣는 역할을 한다.

 

CSS : 웹사이트의 레이아웃과 글꼴, 색상 등의 디자인을 입히는 역할을 하는 언어

자바스크립트 : 프로그래밍 언어의 한 종류로, 만약 웹사이트가 HTML으로만 구성되어 있다면 추가적으로 사용자가 버튼을 누르거나 정보를 입력하는 동적인 작업을 처리하기 위해서 사용한다.

 

macOS 개발 환경 ⇒ 터미널이라고 부르는 명령 줄 기반 인터페이스를 사용한다.

먼저 Node.js와 npm(Node.js를 위한 패키지 매니저) 설치하기

https://nodejs.org/en/

 

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

터미널에서 설치된 Node.js 버전 확인 가능

 

VS code 설치하기

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

01  리액트 소개

리액트 : 웹과 네이티브 사용자 인터페이스를 위한 라이브러리

 

라이브러리 : 자주 사용되는 기능을 정리해 모아 놓은 것

 

사용자 인터페이스(UI) : 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것

 

대표적인 자바스크립트 UI 프레임워크 : 앵귤러JS, 리액트, 뷰JS

 

➕[리액트의 장점] 1. 빠른 업테이트와 렌더링 속도

리액트에서는 빠른 업데이트를 위해 내부적으로 Virtual Dom(가상의 Dom)이라는 것을 사용한다.

Dom(Document Object Model) : 페이지를 정의하는 하나의 객체로, 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇

 

리액트 Dom은 기존의 방식과 다르게 업데이트해야 할 최소한의 부분만 찾아서 업데이트한다. 위 그림처럼 어떤 상태의 변경이 일어나면 Virtual Dom에서는 업데이트해야 될 최소한의 부분을 검색한 후 검색된 부분만 업데이트하고 다시 렌더링하면서 변경된 내용을 빠르게 사용자에게 보여줄 수 있다.

 

➕[리액트의 장점] 2. 컴포넌트(구성요소) 기반의 구조 ⇒ 재사용성

웹사이트 개발 시, 컴포넌트를 조합해서 만들게 된다. 이러한 컴포넌트를 반복적으로 사용하는 경우가 많으므로 재사용성은 큰 장점이다.

재사용성 ⇒ 의존성을 낮추고 호환성 문제가 발생하지 않도록 개발한다.

재사용성의 장점 ⇒ 전체 소프트웨어의 개발 시간이 단축되며 유지 보수가 용이하다.

 

➕[리액트의 장점] 3. 메타라는 든든한 지원군

메타(구 페이스북)가 만든 리액트는 전세계 최대 IT 기업 중 하나로, 꾸준히 버전 업데이트가 이루어진다.

 

➕[리액트의 장점] 4. 활발한 지식 공유 & 커뮤니티

리액트는 굉장히 큰 개발자 커뮤니티를 형성하고 있으므로, 모르는 것을 바로바로 찾아서 볼 수 있다.

 

➕[리액트의 장점] 5. 모바일 앱 개발 가능

리액트를 배운 이후에 리액트 네이티브라는 모바일 환경 UI 프레임워크를 사용하여 모바일 앱도 개발할 수 있다.

 

➖[리액트의 단점] 1. 방대한 학습량

리액트는 기존과 다른 방식의 UI 라이브러리이기 때문에 배워야 할 것들이 많다.

 

➖[리액트의 단점] 2. 높은 상태 관리 복잡도

성능 최적화를 위해 state를 잘 관리하는 것이 중요하며 웹사이트 규모가 커져 컴포넌트의 개수가 많아지면 상태 관리의 복잡도 또한 증가한다. 따라서 보통 큰 규모의 프로젝트에서는 상태 관리를 위해서 외부 상태 관리 라이브러리를 사용하는 경우가 많다.

 

02 리액트 시작하기

HTML 작성해보기

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>주니코딩의 블로그</title>
    </head>
    <body>
        <h1>주니코딩 블로그에 오신 여러분을 환영합니다!</h1>
    </body>
</html>

 

CSS 작성해보기

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>주니코딩의 블로그</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>주니코딩 블로그에 오신 여러분을 환영합니다!</h1>
    </body>
</html>

 

 

React.js 추가해보기

root라는 id를 가진 <div> 태그를 추가하여 <div> 태그가 앞으로 DOM 컨테이너로 사용되도록 한다.

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>주니코딩의 블로그</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>주니코딩 블로그에 오신 여러분을 환영합니다!</h1>

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

그 다음 <script> 태그를 사용해서 리액트의 자바스크립트 파일을 가져올 수 있다.

 

create-react-app 도구 사용해보기

VS Code 터미널에서 아래 create-react-app 명령어 실행시키기

$ npx create-react-app my-app
$ cd my-app
$ npm start

 

 

03 JSX 소개

JS : 자바스크립트를 줄여 부르는 것

JSX : 자바스크립트의 확장 문법

const element = <h1>Hello, world!</h1>

위 코드는 자바스크립트 코드와 HTML 코드가 결합되어 있는 JSX 코드이다. 이 코드는 <h1> 태그로 둘러싸인 문자열을 element라는 변수에 저장한다.

 

리액트의 createElement() 함수 : JSX 코드를 자바스크립트 코드로 변환하는 역할을 하는 함수

React.createElment(
	type,
	[props],
	[...children]
)

첫 번째 파라미터는 엘리멘트의 유형을 나타낸다.

두 번째 파라미터는 props(속성들)가 들어가게 된다.

마지막 세 번재 파라미터는 children(현재 엘리먼트가 포함하고 있는 자식 엘리먼트)이 들어간다.

 

[JSX의 장점]

  1. 코드가 간결해진다.
  2. 가독성이 향상된다.
  3. Injection Attack이라 불리는 해킹 방법을 방어함으로써 보안성이 올라간다.

실습 - JSX 코드 작성해보기

my-app/src/chapter03 에 Book과 Library라는 이름의 리액트 함수 컴포넌트를 생성한다. 그 후 index.js 파일을 열어서 import문을 사용하여 만든 Library 컴포넌트를 가져온 뒤에, ReactDom을 사용해 root DOM node에 렌더링하도록 코드를 수정한다.

터미널에 npm start 명령어를 실행시키면 나오는 화면

 

04 엘리먼트 렌더링

엘리먼트 : 리액트 앱의 가장 작은 빌딩 블록들

여기에 보이는 ‘요소’가 엘리먼트를 모아 놓은 것이다.

해당 엘리먼트는 리액트 엘리먼트가 아닌 DOM 엘리먼트이다.

리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이다.

 

리액트 엘리먼트

  1. 자바스크립트 객체 형태로 존재한다.
  2. 중요 특징 : 불변성(엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다.

 

엘리먼트 생성한 이후에 실제로 화면에 보여 주기 위해서는 렌더링 과정을 거쳐야 한다.

const element = <h1>안녕, 리액트!</h1>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(elemnet);

위 코드는 엘리먼트를 하나 생성하고 생성된 엘리먼트를 root div에 렌더링하는 코드이다.

 

실습 - 시계 만들기

Clock.jsx라는 파일 생성 후 index.js 코드 수정해주기

import React from "react";

function Clock(props) {
    return (
        <div>
            <h1>안녕, 리액트!</h1>
            <h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
        </div>
    );
}

export default Clock;