이번 글의 시리즈는 다음 강의를 듣고 복습하면서 작성한 글입니다.

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

Section 1. 시작하기

• React.js란 무엇일까요?
• 리액트JS 와 "바닐라 자바스크립트" 비교: 왜 리액트를 사용해야 할까요?
• 첫 번째 리액트 앱 편집하기
• 리액트 프로젝트 생성하기: 브라우저 기반 및 로컬 개발
• 로컬에서 리액트 프로젝트 생성하기
• 코드샌드박스로 리액트 개발하기(로컬 설정 필요없음!)
• 모듈 리소스

JS만 쓰는 것의 단점

• 복잡하고 느리다.
• 에러가 발생할 확률이 높다
• 유지보수 및 수정이 어렵다
  ⇒ React는 더 단순한 심상 모델을 제공하고, 더 복잡한 웹앱과 UI를 쉽게 구축하게 한다

👩‍💻 Vue나 Angular는 그렇지 않나?
Angular vs React vs Vue: Core Differences | BrowserStack

👩‍💻 .js .jsx의 차이가 없나? 일단 돌아가긴 하네?

⭐️ React는 선언형 UI 프로그래밍

• 목표로 하는 UI 상태를 정의한다(거쳐야할 단계는 정의하지 않는다)
• React는 그 과정을 알아서 파악해 수행한다.
  → 따라서 React는 코드를 선언형으로 작성해야함, 반면 Vanilla JS는 명령형으로 작성한다
  
• CodeSandbox: Code, Review and Deploy in Record Time
• 학습 자료 레포지토리

VScode tip

• 코드 자동 정렬: shift + option + F

프로젝트 세팅 방법

• CRA
• vite CRA Vite
  
• codesandbox (검색창에 react.new)

Section 2. 자바스크립트 리프래쉬

• 페이지에 자바스크립트 추가하기 및 리액트 프로젝트의 차이점
• 리액트 프로젝트 구축 프로세스
• “import” 및 "export"
• 변수와 값 다시 보기
• 연산자 다시 보기
• 함수와 매개변수 다시 보기
• 화살표 함수
• 화살표 함수 구문에 대해 자세히 알아보기
• 객체와 클래스 다시 보기
• 배열 및 배열 메소드(map()과 같은)
• 디스트럭처링
• 함수 매개변수 목록에서 디스트럭처링
• 스프레드 연산자
• 컨트롤 구조 다시 살펴보기
• 리액트 없이 DOM 조작하기!
• 함수를 값으로 사용하기
• 함수 내부에서 함수 정의하기
• 참조형과 기본 값 비교
• 차세대 JavaScript - 요약
• JS Array functions
• 35모듈 리소스

자바스크립트가 실행 가능한 환경

리액트가 빌드 과정을 거치는 이유

1. 리액트 코드 그 자체는 브라우저에서 바로 실행되지 않는다
   JSX는 javascript의 문법에 해당되지 않기 때문에 자바스크립트가 이해할 수 있는 형태로 변환해야 한다
2. 프로덕션 단계에서 코드가 최적화되지 않는다

❗ ⇒ 그래서 React는 코드를 실행하기 위해 빌드 과정을 거친다

Call by Value vs Call by Reference

• Value
  JavaScript에서 숫자, 문자형, 불리언은 기본형 값(primitive)이다.
  기존 값을 수정할 수 없고, 항상 새로운 값을 생성하게 된다.
  값 자체가 메모리에 할당된다
• Reference
  배열과 객체는 참조형 값이다.
  기존 값을 수정할 수 있다.
  객체는 메모리에 주소를 참조하고, 주소값에 있는 값은 수정 가능하기 때문이다.

Array 메소드

Array - JavaScript | MDN

느낀 점

React로 프로젝트를 제일 많이 했지만 누구보다도 React를 모르고 있다는 것을 과제테스트나 면접에서 느껴버렸다. 그래서 택하게 된 강의, 비록 양은 좀 많지만 내가 부족한 부분을 확실히 채우기 위해 열심히 들어보도록 하겠다.
그런데 한 가지 위안을 받았던 점은, 2장은 자바스크립트 관련한 기초 지식들이었는데 내가 아예 모르는 편은 아니란 것이었다. 그래도 전혀 자만을 가지지 않고 언제든 배우고자 하는 자세를 잃지 말자!