[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리

 

 

0. 모바일 앱과 웹의 차이

모바일 앱은 화면 전환이 원활하게 이루어져서 기다릴 필요가 없다
하지만 웹사이트는 아니다

• 웹사이트를 클릭하면
• 요청이 서버에 전송되고
• 새로운 html 페이지가 브라우저로 보내져
• 화면에 표시됨
  => 무겁고 불편하다

 

 

1. 웹에서 일어나는 사이클

이런요청과 반응 사이클을 자바스크립트로 분해해보자.
JS는 개발자들이 브라우저에서 로직을 실행할 수 있게 해준다 => 사용자들이 보는 것을 조작할 수 있음

브라우저에서 JS는 DOM을 조작할 수 있는데 이를 통해 html이 렌더링된다.
이를 통해 새로운 html 페이지를 가져오지 않고도 새로운 것을 사용자에게 보여줄 수 있다

 

✍ React가 필요한 이유

• React.js는 클라이언트 사이드의 자바스크립트 라이브러리고 client-side의 자바스크립트 코드를 작성하는데 도움을 준다.
• 중요한 것은 웹사이트를 위한 최신의 반응형 인터페이스를 구축해준다
• 다채롭고 복잡한 유저 인터페이스를 쉽게 구축할 수 있다
• 고수준의 구문을 제공해서 선언형 방식, 컴포넌트 중심의 방식으로 만든다

JS로 작업할 때는 모든 단계를 일일히 작성해야 한다

• 클릭 리스너 추가
• elment 생성
• classname 추가
  등...
  모든 단계들이 전부 설명되어야 한다
  이런 방식을 명령형 접근방식이라고 한다

명령형 접근방식의 단점

• 개발자가 일일히 신경써야 한다
• 버튼을 생성하고, 텍스트 컨텐츠를 설정하기 위해 진 코드를 실행해야 한다
• 반복적인 작업을 하느라 시간이 낭비됨

 

✍ React로 SPA 구축하기

전체 페이지가 아니라 위젯 페이지 등 일부 페이지만 지배할 수도 있다.
하지만 React로는 전체 페이지를 지배하는 것이 일반적,
=> 페이지 전환에도 react를 사용한다는 말.
새로운 페이지를 클릭했을 때 페이지를 전환한 것처럼 보이지만 실제로 새로운 html을 요청하지는 않을 수 있다
=> 매끄러운 UI와 좋은 사용자 경험을 만들어낼 수 있다.

 

✍ React의 대안

React는 컴포넌트 기반 라이브러리이고 컴포넌트에만 중점을 맞춰 다른 기능은 많이 없다.
따라서 React로 routing같은 것을 하기 위해서는 추가적으로 서드 파티 라이브러리를 설치해야 한다

따라서 대안으로 Angular가 있는데.. 한번도 인기가 없었다.

• 리엑트와 마찬가지로 컴포넌트에 집중
• 리엑트보다 많은 기능
• 타입스크립트 수용
• 작은 프로젝트에는 좋지 않을 수 있음
• 내장 기능이 많아서 큰 프로젝트에는 좋을 수가 있음

앵귤러와 리엑트는 다른 방식으로 컴포넌트를 구축한다

또 다른 대안으로 Vue.js

• 위 두개를 합쳐놓은 것 같다
• 컴포넌트 기반의 UI 프레임워크
• 기능이 리액트보다는 많고 앵귤러보다는 적음
• 앵귤러를 사용할 때만큼 과부하되지는 않는다.

세 기술 다 유명하지만 현재는 리엑트가 가장 인기있다.

 

 

 

2. 강의 개요

1. 리엑트에 관한 기본적인 것들
   • react에서 제공하는 핵심 기술을 다룬다
2. 고급 주제
   • 심화된 개념들
3. 개념 요약, refresh

리엑트에 관한 기본적인 것들

• 컴포넌트에 관한 것
  • 컴포넌트를 구축하는 방법 / 결합 방법
  • react가 어떻게 사용자 인터페이스를 구축하는지
• 이벤트와 데이터를 다루는 방법
  • props / state
• Styling
• React Hooks

고급 주제

• Side Effects & More React Hooks
• React의 Context API & Redux
  • react의 써드 파트 라이브러리인 redux
• 폼에서 사용자 입력을 처기하는 방법 / HTTP 요청 / Custom Hooks
• Routing
  • NextJS & More

개념 요약, refresh

• JavaScript Refresher
  • JS 최신 기능
• ReactJS Summary