home
Backend
///
home
Backend
Algorithm
Project
ETC
///

처음 만난 리액트 (React)

Search

HTML과 CSS

HTML과 CSS 구성

1. HTML과 CSS

JavaScript

•
ECMAScript가 정확한 명칭
•
JavaScript는 웹 사이트에 생명을 불어넣는 역할 (동작)
•
스크립트 언어의 특징

자료형

2. JavaScript 소개 및 자료형
•
대입 연산자 (Assignment operator)
•
사칙 연산자
•
증감 연산자 (post는 뒤, pre는 앞)
3. JavaScript의 연산자
•
JavaScript에서 함수를 사용하는 방법
4. JavaScript의 함수
•
windows에서는 powershell, macOS에서는 terminal 사용
•
Node.js, npm 설치
•
vsc 설치
개발환경 설정하기

리액트란?

•
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
•
사용자 인터페이스를 만들기 위한 자바스크립트 기능 모음집

라이브러리

•
자주 사용되는 기능들을 정리해 모아놓은 것
리액트는 무엇인가?

장점

•
빠른 업데이트와 렌더링 속도
•
Virtual DOM
•
Virtual DOM vs Browser DOM
•
Component 개념
React의 장점과 단점

사이트 만들기

•
html 만들기
•
css 만들기
직접 리액트 연동하기
create-react-app

JSX 란?

•
A syntax extension to JavaScript
•
자바스크립트의 확장 문법
•
JavaScript + XML / HTML 를 합친 것
•
createElement
10. JSX란?
•
jsx를 사용하여 얻을 수 있는 장점

JSX 사용법

•
JavaScript 코드 + XML / HTML
11. JSX의 장점
•
Book.jsx
•
Library.jsx
•
index.js
•
결과
12. JSX 코드 작성해보기

Elements

•
어떤 물체를 구성하는 성분
•
리액트 앱을 구성하는 요소
•
리액트 앱을 구성하는 가장 작은 빌딩 블록들

React Elements vs DOM Elements

13. Rendering Elements

Elements의 특징

•
불변성 (React elements are immutable)

Virtual DOM의 구성도

14. Elements의 특징 및 렌더링하기
15. (실습) 시계 만들기

Component-Based

•
모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트로 구성될 수 있다.
•
하나의 함수로 이해하면 어렵지 않다.
16. Components와 Props의 정의

Read-only

•
읽을 수만 있다 = 값을 변경할 수 없다
•
붕어빵 다 구워졌는데 속재료 바꿀 수 없음…
•
새로운 값을 컴포넌트에 전달하여 새로 Element 생성

JavaScript 속성

17. Props의 특징 및 사용법
•
함수 컴포넌트 개선 → Hook
•
리액트 개발 시 거의 Hook을 사용

Function Component

•
React의 컴포넌트는 일종의 함수 (함수 컴포넌트)
18. Component 만들기

Component 합성

•
컴포넌트 합성은 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것이다.
•
리액트에서는 Component 안에 또 다른 Component를 쓸 수 있다.
•
복잡한 화면을 여러 개의 Component로 나눠서 구현 가능
19. Component 합성
•
Comment.jsx
•
CommentList.jsx
20. (실습) 댓글 컴포넌트 만들기

State

•
리액트 Component의 상태
•
state는 JavaScript의 객체이다.
•
state는 직접 수정할 수 없다 (하면 안 된다)
21. State and Lifecycle
•
결과
•
Notification.jsx
•
NotificationList.jsx
22. (실습) state 사용하기

Hooks

•
Hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 사용할 수 있다. (Hook - 갈고리)
23. Hooks의 개념과 useState, useEffect
•
useMemo
•
useCallback
•
useRef
24. useMemo, useCallback, useRef
•
Hook은 무조건 최상위 레벨에서만 호출해야 한다.
•
Hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.
•
잘못된 Hook 사용법
•
리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.
•
eslint-plugin-react-hook 패키지
25. Hook의 규칙
Load more