[React] 리액트 공부 1일차

 

📍나중에 목차별 정리해서 포스팅하겠지만, 개인 공부 하면서 정리할 겸 작성해야겠단 생각이 들었고 바로 실천하기 위해 작성한다.

 

---

 

React.Advantage
React.장점

1. SPA(Single Page Application)만들기에 용이함
   - SPA: 브라우저에 최초 한번 페이지 전체를 불러오고, 이후 특정 부분만 Ajax를 통해 데이터 바인딩 하는 형식
   - Ajax(Asynchronous Javascript And XML) : JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술. 즉, JavaScript를 통해서 서버에 데이터를 요청하는것
   
2. HTML 재 사용성이 용이함
3. 컴포넌트 기반 아키텍처를 사용 코드 재 사용이 높고, 유지 보수가 쉬움
4. 성능이 좋음 : 가상 돔을 사용한 빠른 업데이트, 렌더링을 가능하게 함
   -  가상 돔(Vitual DOM) :가상 돔은 메모리 상에 존재하는 가상의 DOM, 변경 사항을 실제 DOM에 적용하기 전 가상 돔 상에서 처리해 불필요한 업데이트를 최소화, 웹 애플리케이션의 성능 향상 및 사용자 경험이 개선

 

React. Disadvantage
React.단점

1. JSX문법
   - 일반적인 HTML과 다르기 때문에 처음 사용하는 개발자들에게 학습 곡선이 높을 수 있다
   
2. 보일러플레이트 코드(반복적인 코드)가 많이 발생할 수 있다
3. 상태 관리가 복잡해질 수 있다
4. 러닝 커브가 높은 편은 아니다

* 이러한 단점들은 React를 사용하는 개발자들에게는 그리 큰 문제가 되지 않는 경우가 많을수 있다. *

 

 

---

 

Add React.Project
React 프로젝트 생성

👉프로젝트 폴에 Shift+우클릭으로 PowerShell로 열어 'npx create-react-app 프로젝트명' 작성

*프로젝트명에 본인이 원하는 프로젝트명을 작성하시라는 말씀ㅎㅎ

 

※ ERROR 시 window경우

- (허가되지 않은 스크립트 ~): 검색에 PowerShell 검색 후 관리자로 실행 ▶ Set-ExecutionPolicy Unrestricted 입력 후 엔터 (Y)선택 후 다시 입력해보기
- (The engine "node" is incompatible with this module): nodejs 버전이 낮거나 높다는 뜻. nodejs를 요구하는 버전으로 재설치

 

※ ERROR 시 Mac경우

- ( permission이 없어요): sudo를 붙여 사용 ex) sudo npx create-react-app 프로젝트명 ▶ 맥북 비번 입력하면 사용 (Y)선택

---

 

 

JSX(JavaScript XML)?

1. JavaScript에 XML을 추가하여 확장한 문법

- XML(eXtensible Markup Language) : XML은 마크업 언어를 정의하기 위한 언어이며, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다.

2. React “객체(element)”를 생성하며, 이 객체는 DOM객체와 달리 일반 객체(plain object)이다.

 

 

JSX문법

• class를 className으로 사용
• 변수 사용 시 중괄호{} 안에 작성 
• HTML안의 요소 스타일 지정 시 style = {{ color: 'red' }}
• div태그로 감싸주기 : 하나의 DOM트리 구조를 이루어야 함

 

 

 

---

📍 1일차에 사용한 문법정리 📍

spread 문법: 객체 혹은 배열을 펼칠 수 있다 (원본을 건들이지 않고, 복사본을 만들 수 있는 장점)

const numbers = [1, 2, 3];
const spreadNumbers = [...numbers, 28];
console.log(spreadNumbers); //[1, 2, 3, 28]

// 연속으로도 가능
const numbers = [1, 2, 3];
const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 1000, 1, 2, 3]

 

rest문법: 개별 요소들을 모아서 배열이나 객체로 묶는 역할

const numbers = [1, 2, 3];
const spreadNumbers = [...numbers, 28];
console.log(spreadNumbers); //[1, 2, 3, 28]

// 연속으로도 가능
const numbers = [1, 2, 3];
const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 1000, 1, 2, 3]

React문법은 아니지만 강의보면서 공부 했어요ㅎㅎ