프론트엔드

생활코딩 - React class vs. function style coding

생활코딩에서 제공하는 React 관련 강의로, 리액트에서 클래스와 함수 스타일로 콤포넌트를 작성하는 방법을 배우고 차이점을 살펴봅니다.

(4.9) 수강평 173개

수강생 4,756명

Egoing Lee

React

중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

리액트에서의 클래스 및 함수 스타일 콤포넌트 작성법
리액트 훅의 개념 및 사용 방법

1. 강의 소개

React에서 콤포넌트를 작성하는 방법은 두 가지입니다.
클래스 스타일과 함수 스타일로 코딩하는 것입니다.

클래스 스타일은 모든 기능을 다 사용할 수 있지만, 복잡합니다.
함수 스타일은 제한된 기능만 사용할 수 있지만, 단순합니다.

최근 함수 스타일에 hook 기능이 추가되면서 함수 스타일로 클래스 스타일의 기능성에 버금가는 콤포넌트를 만들 수 있게 되었습니다.

2. 강의 목표

이 수업에서는 클래스와 함수 스타일로 동일한 콤포넌트를 만들어가면서 어떤 차이점이 있는지를 비교해가며 콤포넌트를 작성하는 방법을 배우는 수업입니다. 또 최근 도입된 hook을 어떻게 사용하는지도 알려드립니다.

3. 선수 지식 및 선행학습

이 수업은 React 수업에 의존하고 있습니다. 리액트를 모르신다면 리액트 수업을 먼저 보시고 참여하실 것을 권합니다.
생활코딩 리액트 수업 바로가기

4. 전체 지도

아래 주소를 방문하시면 전체 지식의 지도를 볼 수 있습니다.
https://seomal.org/

6. 수업 저작권

이 강의는 CC 라이센스를 따르고 있으며, 아래 링크에서도 볼 수 있습니다.
https://opentutorials.org/module/4600 좋은 지식을 공유해주시는 생활코딩에 감사의 말씀을 전합니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

리액트 입문 이상 학습자
클래스 스타일과 함수 스타일의 차이점을 배우고 싶은 분

선수 지식,
필요할까요?

리액트

안녕하세요
Egoing Lee입니다.

297,735

명

수강생

7,611

개

수강평

개

답변

4.9

점

강의 평점

개

강의

커리큘럼

전체

10개 ∙ (1시간 6분)

섹션 1. 오리엔테이션

2개 ∙ (9분)

수업 소개
03:13
수업의 목표
06:20

섹션 2. React class vs. function style

7개 ∙ (49분)

클래스에서 state 사용법
06:01
함수에서 state 사용법 hook
10:26
클래스에서 라이프 사이클 구현하기
08:01
함수에서 라이프 사이클 구현하기 - 실습준비
03:08
함수에서 라이프 사이클 구현하기 - useEffect
07:17
함수에서 라이프 사이클 구현하기 - clean up
05:40
함수에서 라이프 사이클 구현하기 - skipping effect
09:05

섹션 3. 마무리

1개 ∙ (6분)

총정리 겸 수업을 마치며
06:49

강의 게시일: 2020. 02. 16.

마지막 업데이트일: 2020. 02. 17.

수강평

전체

173개

4.9

173개의 수강평

유주
2024. 07. 06.
∙
수강평 8
∙
평균 평점 5.0
5
100% 수강 후 작성
리액트 쓰면서 제일 궁금했던 것..
Yohan Kim
2025. 03. 20.
∙
수강평 7
∙
평균 평점 4.4
5
100% 수강 후 작성
Beruberu
2025. 03. 11.
∙
수강평 8
∙
평균 평점 4.5
5
50% 수강 후 작성
전정헌
2024. 05. 14.
∙
수강평 1
∙
평균 평점 4.0
4
100% 수강 후 작성
남은주
2024. 08. 09.
∙
수강평 2
∙
평균 평점 5.0
5
100% 수강 후 작성
되게 설명을 잘해주셨네요 지금 '리액트 네이티브를 다루는 기술' 책으로 공부하고 있는데 자바스크립트 다루다 컴포넌트를 다루니까 잘 이해가 안되더라구요 ㅎㅎ 사이클이... 어렵더라구요 그런데 설명을 잘해주셔서 좋았습니다.

Egoing Lee님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

클라우드 서비스 AWS

Egoing Lee

무료

초급 / AWS

4.9

(285)

11,400+

이 수업은 클라우드 서비스인 AWS(Amazon Web Services)의 기본적인 사용법과 파일의 저장공간을 제공하는 S3를 다루고 있는 수업입니다.

초급

AWS

생활코딩 - React

Egoing Lee

무료

초급 / React

4.9

(474)

13,900+

리액트의 컴포넌트를 만드는 법과 리액트와 불변의 관계를 알아봅니다.

초급

React

WEB2 - CSS

Egoing Lee

무료

초급 / HTML/CSS

5.0

(367)

4,700+

이 수업은 https://opentutorials.org(생활코딩 사이트)를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

초급

HTML/CSS

Node.js - Express

Egoing Lee

무료

중급이상 / Express

4.9

(54)

4,200+

이 수업은 Node.js의 대표 웹프레임워크인 Express를 이용해서 웹애플리케이션을 구현하는 방법에 대한 수업입니다.

중급이상

Express

기본을 확실히!! HTML의 모든 것

Egoing Lee

무료

입문 / HTML/CSS

5.0

(425)

15,300+

생활코딩 이고잉님의 새로운 HTML 수업입니다.

입문

HTML/CSS

DATABASE 1&2 - MySQL

Egoing Lee

무료

초급 / MySQL, DBMS/RDBMS

4.9

(341)

9,000+

정보기술의 심장인 데이터베이스에 대한 포괄적인 소개를 담고 있습니다. 데이터베이스의 본질을 공부하며 가장 대표적인 관계형 데이터베이스인 MYSQL 을 학습해 봅니다.

초급

MySQL, DBMS/RDBMS

버전 관리 시스템 Git

Egoing Lee

무료

입문 / Git, 버전관리시스템

4.9

(70)

5,600+

이 수업은 버전관리 시스템 git을 소개하는 수업입니다.

입문

Git, 버전관리시스템

WEB2 - Domain Name System

Egoing Lee

무료

초급 / 도메인

4.9

(29)

1,100+

이 수업은 도메인 이름을 자신의 서버 컴퓨터에 부여하는 방법을 알려드리는 수업입니다.

초급

도메인

AWS (아마존 웹서비스) 가입부터 활용까지

Egoing Lee

무료

중급이상 / AWS

4.8

(172)

8,200+

세계적인 클라우드 서비스 AWS 의 기본부터 활용까지 배울 수 있는 수업입니다. AWS 를 이용해 자신만의 서비스를 전세계에 보여주세요.

중급이상

AWS

지옥에서 온 Git

Egoing Lee

무료

입문 / Git, 버전관리시스템

5.0

(228)

10,900+

이 수업에서는 명령어를 통해서 Git을 다루는 방법을 소개합니다.

입문

Git, 버전관리시스템

생활코딩 - SQLite

Egoing Lee

무료

초급 / DBMS/RDBMS, SQLite

4.8

(21)

700+

생활코딩(오픈튜토리얼스)에서 제공하는 SQLite 강의로, 관계형 데이터베이스 SQLite에 입문할 수 있습니다.

초급

DBMS/RDBMS, SQLite

생활코딩 - Web2 : OAuth 2.0

Egoing Lee

무료

중급이상 / 웹앱, OAuth

4.9

(117)

2,700+

생활코딩에서 제공하는 OAuth 관련 강의로, API 상호 연동에 대한 기술을 배울 수 있습니다.

중급이상

웹앱, OAuth

생활코딩 - JavaScript Immutability

Egoing Lee

무료

초급 / JavaScript

4.9

(93)

2,700+

생활코딩에서 제공하는 자바스크립트 관련 강의로, 자바스크립트에서 데이터를 불변하게 다루는 방법에 대한 수업입니다.

초급

JavaScript

생활코딩 - Redux

Egoing Lee

무료

중급이상 / Redux

4.9

(145)

3,400+

생활코딩에서 제공하는 Redux 강의로, 자바스크립트를 중급 이상 다루는 분들을 대상으로 리덕스를 이용해 더 단순한 코드로 더 복잡한 애플리케이션을 만드는 방법에 대한 수업입니다.

중급이상

Redux

WEB5 - Express Passport.js

Egoing Lee

무료

중급이상 / Node.js, Express

5.0

(17)

1,000+

이 수업은 Node.js Express의 인증 미들웨어인 Passport.js의 사용법을 알려드리는 수업입니다.

중급이상

Node.js, Express

Web4 - Express-Session-Auth

Egoing Lee

무료

중급이상 / Express

4.9

(13)

1,000+

이 수업은 Node.js 웹프래임웍인 Express에서 Session을 이용해 인증을 구현하는 방법을 알려드리는 수업입니다.

중급이상

Express

WEB2 Node.js-MySQL

Egoing Lee

무료

중급이상 / Node.js, MySQL

4.9

(70)

3,800+

이 수업은 Node.js와 MySQL을 이용해서 웹애플리케이션을 만드는 방법에 대한 수업입니다.

중급이상

Node.js, MySQL

WEB2 - Node.js

Egoing Lee

무료

초급 / Node.js

4.9

(229)

5,800+

이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다.

초급

Node.js

WEB2 - Home server

Egoing Lee

무료

초급 /

4.9

(103)

1,800+

공유기를 전문용어로는 라우터라고 합니다. 라우터는 인터넷이 동작하는 핵심중의 핵심이라고 할 수 있습니다. 라우터를 이해한다면 인터넷을 바라보는 시야가 확 넓어진 것을 체감할 수 있을 것입니다.

초급

WEB2 - Python 기초

Egoing Lee

무료

초급 / Python

5.0

(52)

3,500+

이 수업에서는 WEB1에서 만든 웹사이트에 Python을 투입했을 때 어떤 효과를 얻을 수 있는지를 알려드리는 수업입니다.

초급

Python

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

얄코의 리액트(React) - (Korean ver.)

얄팍한 코딩사전

₩33,000

25%

₩24,750

초급 / React, Node.js, JavaScript, 웹앱

4.9

(34)

300+

설명대장 얄코의 녹진하고 꾸덕한 강좌로 가장 쉽게, 가장 빠르게 리액트를 배우세요!

초급

React, Node.js, JavaScript

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

₩44,000

초급 / React, Firebase, 웹앱

4.7

(43)

1,000+

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

리액트로 나만의 블로그 만들기(MERN Stack)

싸플

₩29,700

중급이상 / Node.js, React, Redux, Bootstrap, MongoDB, Express

4.0

(30)

400+

풀스택으로 나만의 블로그를 만들어 보아요~~!

중급이상

Node.js, React, Redux

리액트 기초 (Introduction to React)

부산대학교 소프트웨어융합교육원

무료

초급 / React, hook, react-router

4.6

(7)

400+

리액트를 활용한 웹 애플리케이션 개발 능력을 갖추고 실무에 적용할 수 있는 역량을 키워보자!

초급

React, hook, react-router

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

₩88,000

중급이상 / React, Redux, Node.js, Express, Next.js

4.9

(178)

3,600+

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

중급이상

React, Redux, Node.js

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

₩16,500

중급이상 / Next.js, React, GraphQL, Prisma, AWS

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

Next.js, React, GraphQL