[React] study (리액트 시작하기) #1일차

📖 참고 서적:

소플의 처음 만난 리액트 

📆  진행

chapter 0 준비하기 ✅

chapter 1 리액트 소개 ✅

chapter 2 리액트 시작하기 ✅

---

 chapter 0 준비하기

 

HTML이란? (Hyper Text Markup Language)

웹사이트의 뼈대를 구성하기 위해서 사용하는 마크업 언어

마크업 : 문서나 데이터를 처리하기 위해 문서에 추가되는 정보

마크업 언어: 마크업 정보를 표현하기 위한 언어

 

SPA(Single Page Application)

하나의 페이지만 존재하는 웹사이트(또는 웹 어플리케이션)

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

해당 페이지의 내용을 채워 보내주는 것

 

자바스크립트의 자료형

일반적인 프로그래밍 언어에서는 변수를 선언하는 시점에 해당 변수의 자료형이 결정된다 

하지만 자바스크립트에서는 변수에 데이터가 대입되는 시점에 해당 변수의 자료형이 결정된다. 

이를 동적타이핑이라고 한다.

 

- undefined :값이 정의되지 않은 상태 

- null :값이 정의되긴 했는데, 그 값이 null인 상태

- 배열: 다양한 자료형의 변수가 들어갈 수 있다. 순서대로 모아놓은 것이라 순서를 나타내는 index 값이 있다.

---

 chapter 1 리액트 소개

 

리액트란?

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

SPA를 쉽고 빠르게 만들수 있도록 해주는 도구

 

장점

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

- 재사용성이 높은 컴포넌트 기반 구조

- 메타(구 페이스북)의 든든한 지원

- 활발한 지식 공유와 커뮤니티

- 리액트 네이티브를 통한 모바일 앱 개발 기능

 

단점

- 방대한 학습량

- 높은 상태 관리 복잡도

*state

리액트 컴포넌트의 상태 -> 리액트는 바뀐 부분만 찾아 업데이트 -> 바뀐 부분 이라는 것은 state가 바뀐 컴포넌트를 의미

 

 

프레임워크 vs 라이브러리

차이점: 프로그램의 흐름에 대한 제어 권한

- 프레임워크: 흐름의 제어 권한을 프레임워크가 가지고 있다. (프레임워크 자신에게 제어 권한)

- 라이브러리: 흐름에 대한 제어를 하지 않고, 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태 (개발자에게 제어 권한)

 

---

 chapter 2 리액트 시작하기

 

간단히 만든 웹사이트에 react.js를 추가하는 방법!

 

1. 기존의 웹사이트 HTML에 DOM container를 추가한다. (위치: body태그)

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

 

2. 리액트의 자바스크립트 파일 가져오기 (react,react-dom)

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

 

3.리액트 컴포넌트를 가져온다 (Mybutton.js 파일 생성 후)

<script src="Mybutton.js"></script>

 

4.리액트 컴포넌트를 만든다

 

하지만 리액트가 적용되어 있는 상태로 개발을 시작하는 방법이 있다!!

create-react-app (CRA)

VS code의 터미널에 다음과 같이 작성한다.

$npx create-react-app 프로젝트이름

 

//위치한 경로를 변경
$ cd my-app
//어플리케이션 실행
$npm start

실행 완료