리액트를 배우기 위해 필요한 기초 지식에 대해서 학습한다.

웹페이지를 구성하는 HTML과 웹페이지의 동적인 부분을 구현하는 자바스크립트 문법과

자바스크립트 표준 규격인 ECMAScript 문법에 대해서도 알아본다.

 

❑ HTML(Hyper Text Markup Language)

 

● 웹사이트의 뼈대를 구성하는 태그

<html>
	<head>
    </head>
    <body>
    </body>
</html>

 

<html> 태그 : 말 그대로 HTML의 시작과 끝을 알리는 태그

<head> 태그 : 이 웹사이트가 어떤 웹사이트인지 알 수 있는 여러 가지 속성(제목, 설명 등)을 담고 있다.

<body> 태그 : 실제 웹사이트에서 보이는 콘텐츠, 실제로 웹브라우저에서 보게 되는 내용

 

❑ SPA(Single Page Application)

● 복잡한 사이트에 접속하면 여러 가지 버튼이나 탭을 누르면서 여러 페이지를 이동하게 되는데 그때마다

브라우저에 나오는 내용이 달라지는 볼 수 있다. 내용이 바뀐다는 것은 각 페이지별로 HTML이 존재하며,

페이지를 이동하게 될 경우 브라우저에서 해당 페이지의 HTML 파일을 받아와서 화면에 표시해 준다.

이와 같이 수많은 HTML파일을 관리하기 힘든 문제를 해결하기 위해 나오게 된 것이 SPA이다.

SPA는 말 그대로 하나의 페이지만 존재하는 웹사이트다.

 

왼쪽에 보이는 것이 전통적인 웹 애플리케이션 방식이고, 오른쪽에 보이는 것이 SPA이다.  HTML파일 대신 해당 콘텐츠를 가져와 동적으로 <body> 태그 내부를 채워 넣는 방식이다.

 

❑ CSS(Cascading Style Sheets)

● HTML로 웹사이트의 구조를 만들었다면, 그 위에 CSS를 사용하여 디자인을 입히는 형태

 

 

❑ JS(JavaScript)

● 자바스크립트의 정식 명칭은 ECMAScript 이다. ECMAScript의 글자를 따서 ES5, ES6과 같이 표현한다. 2022년 기준 최신버전은 ES13이고, 본 강의에서는 ES6를 다루도록 한다. HTM이 웹사이트의 뼈대를 구성하는 역할을 한다면, 자바스크립트는 웹사이트가 살아 움직이도록 생명을 불어 넣는 역할을 한다.


❑ ES6 문법

● ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어

● let, const 키워드

   - let : 재선언 불가, 재할당 가능

   - const : 상수 선언 키워드

   - 기존 var 키워드만 있었을 때보다 예측 가능한 코드를 작성할 수 있게 되었다.

● 템플릿 리터럴
  - 사용법은 ` ` (back tick)으로 가능하다.

  - ${ } 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.

 

 

● 화살표 함수 : 우측의 표현식을 평가하고 평과 결과를 반환



● 구조 분해 할당

   - ‘펼치다’ 란 뜻으로 객체나 배열에서 사용하며, 값을 해체한 후 개별 값을 변수에 새로 할당하는 과정

 

● Multi-line String
   - 문자열이 라인을 넘어가게 되면 ‘\n’ 과 덧셈 연산자를 사용했어야 했다.

   - 백틱을 사용하게 되면서 여러줄의 문자열 관리도 편해졌다.

 

❑ 리액트의 정의

● 리액트의 공식 웹사이트에서는 다음과 같이 리액트를 정의한다.

A JavaScript library for building user interfaces.

 

보통 영단어 library는 도서관 이라는 의미로 사용되는데, 프로그래밍 언어에서는 자주 사용하는 기능을 정리해 모아 놓은 것이라는 의미를 가지고 있다.

 

 

❑ 리액트 개념 정리

● 리액트는 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 모음집

● 사이트의 규모가 커질수록 수백 개의 페이지가 존재하는데 이것을 각각 페이지마다 HTML로 만드는 것이

아니라 하나의 HTML 틀을 만들어 놓고, 사용자가 특정 페이지를 요청할 때 그 안에 해당 페이지의

내용을 채워서 보내주는 SPA(Single Page Application)을 빠르게 만들 수 있도록 해주는 도구

 

❑ 리액트의 장점

● 빠른 업데이트와 렌더링 속도

내부적으로 Virtual DOM(가상의 DOM)을 사용해서 업데이트해야 할 최소한의 부분을 검색해서

검색된 부분만 업데이트하고 다시 렌더링하면서 변경된 내용을 빠르게 사용자에게 보여준다.

 

● 컴포넌트 기반 구조

컴포넌트는 구성요소라는 뜻을 갖고 있는데 리액트에는 모든 페이지가 컴포넌트로 구성되어 있고,

하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 마치 작은 레고 블록들이

모여서 하나의 완성된 모형이 되는 것과 비슷하다.

 

● 재사용성

객체지향 프로그래밍에서 등장하는 개념으로 다시 사용이 가능한 성질을 말한다. 재사용성이 높아지면

소프트웨어 개발 기간이 단축되고, 유지 보수가 용이하다. 또한 여러 모듈 간의 의존성이 낮아서 각

부분들이 잘 분리되고 쉽게 버그를 찾아서 수정할 수 있다.

 

● 메타(페이스북)이라는 지원군

세계 최대 IT기업 중 하나인 메타에서 시작한 프로젝트로 꾸준히 버전 업데이트가 이뤄지며 발전하고 있다.

현재 시점에서 가장 인기 있는 라이브러리이며 최소 몇 년 동안은 그 영향력이 지속될 것이다. 메타에서

프로젝트를 종료하지 않는 한 계속 발전해 나갈 것으로 예상된다.

 

● 활발한 지식 공유 & 커뮤니티

현재의 영향력을 가지게 된 이유 중 하나로 개발 생태계와 커뮤니티를 꼽을 수 있다. 오픈소스 플랫폼인

깃허브의 리액트 프로젝트의 경우 모든 오픈소스를 통틀어 최상위급 수치를 보이고 있다. 또한 특정 기술의

생태계 규모를 판단하는 지표로 스택오보플로 웹사이트의 해당 기술 언급양을 보더라도 높은 수치를 보여준다.

 

 

● 모바일 앱 개발가능

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

수 있다. iOS는 스위프트(Swift)로, 안드로이드의 경우 코틀린(Kotlin)이라는 프로그래밍 언어를 배워야

하지만 리액트 네이티브를 사용하면 안드로이드앱과 iOS앱을 동시에 출시할 수 있다.

 

❑ 리액트의 단점

● 방대한 학습량

리액트의 경우 다른 UI 라이브러리에 비해 학습할 내용이 많다. 본 강의에서는 리액트의 필수적이고

중요한 부분만 추려서 배우게 된다. 개발자마다 사용하는 방식이 다르고 계속해서 업데이트 되기 때문에

꾸준히 학습하고 내용을 숙지해야 실무 환경에서 원활하게 작업할 수 있다.

 

● 높은 상태 관리 복잡도

리액트에는 state라는 굉장히 중요한 개념이 있다. state는 쉽게 말해 리액트 컴포넌트의 상태를

의미하는데 업데이트를 할 때 바뀐 부분만 찾는다고 했는데 여기서 바뀐 부분이란 state가 바뀐

컴포넌트를 의미한다. 성능 최적화를 위해 state를 잘 관리하는 것이 중요하고, 규모가 커질수록

컴포넌트의 개수도 많아지면서 상태 관리의 복잡도도 증가한다.

'React' 카테고리의 다른 글

[React] 프로젝트 생성 및 설정  (0) 2024.01.18
[React] JSX사용법  (0) 2024.01.17
[React] 리액트 첫시간  (0) 2024.01.16
[React] 리액트를 배울때 기대효과  (0) 2024.01.16
[React] React 강의 내용  (0) 2024.01.15

+ Recent posts

티스토리툴바