안녕하세요!

FE 개발자 유진주입니다.

Web/React

[Udemy React 완벽 가이드] 섹션 1: 시작하기

ypearl 2023. 7. 27. 14:30

리액트(react.js)란 무엇일까?

 리액트(React)

: 자바스크립트의 라이브러리로 사용자 인터페이스를 만드는데 사용

웹에서 모바일과 같은 빠른 반응성을 이끌어냄.

 

전통적인 웹사이트들은 새로운 html 페이지가 로딩되는 동안 기다려야 하기에

약간 무겁고 불편하게 느껴졌다면,

자바스크립트를 사용하면 DOM을 조작하여 브라우저 상에서 html 요소들을 변경할 수 있다.

따라서, 사용자에게 다른 것들을 보여주기 위해 새로운 html 페이지를 요청할 필요가 없다.

이것이 자바스크립트의 역할이고, 리액트 역시 자바스크립트 라이브러리이기 때문에

추가적 구성 요소로서 우리에게 도움이 된다.

 

자바스크립트에 추가로 리액트가 필요한 이유?

리액트와 연계해서 최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있다.

그리고 고수준의 구문 제공으로 선언형 방식, 선언형 컴포넌트 중심의 방식으로 코드를 작성한다.

 

이런 이유로 우리는 리액트 같은 기술이나 프레임워크를 사용하는 것!

 

- 싱글 페이지 애플리케이션(SPA)

: 요청 후에 리액트가 화면에 표시되는 내용을 이어받아 제어

 

강의 개요 정리

> Basics & Foundation (Introducing Key Features)

UI 컴포넌트 구축, 결합

이벤트와 데이터: props(속성)과 state(상태)

리액트 앱과 컴포넌트 스타일링

리액트 훅

 

> Advanced Concepts(Building for Production)

부수효과와 Refs, 더 많은 리액트 훅

리액트의 Context API와 리덕스(서드 파티 라이브러리): 앱의 상태 관리

폼에서 사용자 입력 처리 방법, 백그라운드에서 http요청을 전송해 데이터를 불러오는 방법

커스텀 훅, 훅의 정의

라우팅 구현 방법, 정의

리액트 앱 배포 (Next.js라는 또 다른 프레임워크)

 

> Summaries&Refreshers

JavaScript 리프레시

React 요약