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

처음 만난 리액트 (React)

Search

HTML과 CSS

HTML과 CSS 구성

SPA(Single Page Application)

•
하나의 페이지로 복잡한 웹 사이트를 모두 표현
•
왼쪽은 HTML, 오른쪽은 SPA 구성방식
1. HTML과 CSS

JavaScript

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

자료형

•
변수 선언 시 해당 변수의 자료형이 필요
•
JavaScript는 변수의 데이터가 대입되는 시점에 해당 자료형이 결정됨
•
배열 관련 예제
•
Object 관련 예제
2. JavaScript 소개 및 자료형
•
대입 연산자 (Assignment operator)
•
사칙 연산자
•
증감 연산자 (post는 뒤, pre는 앞)
•
관계 연산자 (비교 연산자)
•
동등 연산자
3. JavaScript의 연산자
•
JavaScript에서 함수를 사용하는 방법
4. JavaScript의 함수
•
windows에서는 powershell, macOS에서는 terminal 사용
•
Node.js, npm 설치
•
vsc 설치
개발환경 설정하기

리액트란?

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

라이브러리

•
자주 사용되는 기능들을 정리해 모아놓은 것

사용자 인터페이스

•
사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것

UI 라이브러리

•
화면을 만들기 위한 기능들을 모아놓은 것
•
대표적인 JavaScript 라이브러리가 바로 React (AngularJS, Vue.js)
리액트는 무엇인가?

장점

•
빠른 업데이트와 렌더링 속도
•
Virtual DOM
•
Virtual DOM vs Browser DOM
•
Component 개념
•
재사용성 (Reusability)
•
React는 Meta라는 든든한 지원군이 있음
React의 장점과 단점

사이트 만들기

•
html 만들기
•
css 만들기
•
결과
•
DOM Container 추가
직접 리액트 연동하기
create-react-app

JSX 란?

•
A syntax extension to JavaScript
•
자바스크립트의 확장 문법
•
JavaScript + XML / HTML 를 합친 것
•
createElement

JSX 사용한 코드, 사용하지 않은 코드

createElement 구성

•
react에서 jsx를 쓰는 것이 꼭 필수는 아니지만 jsx를 사용하면 장점들이 많기에 편리함
10. JSX란?
•
jsx를 사용하여 얻을 수 있는 장점

JSX 사용법

•
JavaScript 코드 + XML / HTML
•
태그의 속성(attribute) 에 값을 넣는 방법
•
자식(children)을 정의하는 방법
11. JSX의 장점
•
Book.jsx
•
Library.jsx
•
index.js
•
결과
12. JSX 코드 작성해보기

Elements

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

React Elements vs DOM Elements

•
React Elements는 화면에서 보이는 것들을 기술

React Elements 생김새

•
자바스크립트 객체 형태로 존재
•
마음대로 변경할 수 없음 (불변성)
13. Rendering Elements

Elements의 특징

•
불변성 (React elements are immutable)

Virtual DOM의 구성도

Elements 렌더링하기

렌더링된 Elements를 업데이트하기

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

Component-Based

•
모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트로 구성될 수 있다.
•
하나의 함수로 이해하면 어렵지 않다.
•
react 컴포넌트 입력
•
객체 지향 개념과 유사 (class와 인스턴스의 개념과 유사)
16. Components와 Props의 정의

Read-only

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

JavaScript 속성

•
이러한 함수를 ‘pure 하다’ 라고 한다.
•
입력값을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값을 리턴
•
입력값 변경
•
‘Impure 하다’ 라고 한다.
17. Props의 특징 및 사용법
•
함수 컴포넌트 개선 → Hook
•
리액트 개발 시 거의 Hook을 사용

Function Component

•
React의 컴포넌트는 일종의 함수 (함수 컴포넌트)

Class Component

•
함수 컴포넌트와 비교했을 때 몇 가지 추가적인 기능이 있음 (추후 다룰 예정)
•
위 상단의 함수 컴포넌트 기능과 동일하나 구현 방식이 다름
18. Component 만들기

Component 합성

•
컴포넌트 합성은 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것이다.
•
리액트에서는 Component 안에 또 다른 Component를 쓸 수 있다.
•
복잡한 화면을 여러 개의 Component로 나눠서 구현 가능

Component 추출

•
잘 활용하면 재사용성이 좋아진다.
•
개발 속도도 엄청 향상된다.
•
예제 코드
•
Avatar 추출하기
19. Component 합성
•
Comment.jsx
•
CommentList.jsx
20. (실습) 댓글 컴포넌트 만들기

State

•
리액트 Component의 상태
•
state는 JavaScript의 객체이다.
•
state는 직접 수정할 수 없다 (하면 안 된다)

Lifecycle

•
생명주기
•
리액트 Component의 생명주기
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 패키지
•
Custom Hook 만들기
•
Custom Hook 추출
•
Custom Hook 사용
25. Hook의 규칙
•
결과
26. (실습) Hooks 사용해보기

Event

•
사건을 의미 (특정 사건을 의미)
•
사용자가 버튼을 클릭한 사건 → 버튼 클릭 이벤트
•
이벤트 처리 → 이벤트 핸들링

Event Handler (= Event Listener)

•
어떤 사건이 발생하면, 사건을 처리하는 역할
•
Event Listener
•
성능 문제 → 바인딩 고려
•
함수 컴포넌트에서의 처리
27, 28. Event의 정의 및 Event 다루기 + (실습) 클릭 이벤트 처리하기