생코 React class vs function style

---

▽뭐가 더 편해?

- props를 인자로 받아와야 하기 때문에 비구조화를 왠지 해야될것같고 더 편하다
- 함수 쓸 때 bind신경 안써도 된다
- render() 가 사실상 함수형이라 다른거 

---

https://opentutorials.org/module/4600

React class & function style coding

 

https://youtube.com/playlist?list=PLuHgQVnccGMCEfBwnNGsJCQDiqSWI-edj

React class vs function style

 

React에서 콤포넌트를 작성하는 방법은 두가지입니다.

클래스 스타일과 함수 스타일로 코딩하는 것입니다.

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

함수 스타일은 제한된 기능만 사용할 수 있지만, 단순합니다.

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

 

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

 

============================================================================

1.수업소개

클래스 : 풀파워, 클래스라는 문법을 알아야, 장황함

함수 : 함수의 문법만, 기능이 부족했다

(state 못 썼고,

컴포넌트의 생성 변경 소멸에 대한 이벤트인 life cycle API를 사용할 수도 없었다.)

 

함수방식은 상위 컴퍼넌트가 시키는 일만 처리하는 단순한 컴퍼넌트에만 사용됐다.

 

최신 리액트에 hook이라는 개념이 도입됨.

 : 함수에서도 다 할 수 있게됨

 

클래스 방식도 장점이 있고, react팀도 클래스 방식 계속 지원할거라고 말함

기존 리액트 자료들 해석할 때도 필요.

 

표현 방식이 풍부해진 것.

서로를 통해서 서로를 더 잘 이해할 수 있다.

 

============================================================================

2.수업의 목표

전략을 세우는 시간

컴포넌트 세개 + 버튼으로 내부의 상태가 바뀌는 걸 통해 표시하는 정보가 바뀜

 

 

state에서만 됐던 것들

 

Hook이 등장하면서

이런식으로 state

이런식으로 라이프 사이클 관리할 수 있게 됨

 

개발환경 세팅

폴더를 만들고

npx create-react-app .

npm start

index.css 내용 지우기

App.css 내용 지우기

App.js부터 편집 시작

import logo한줄 지우고

안에 내용 지워서 이렇게 만들기

 

저렇게 해놓고 개발자도구에서 레이아웃을 잡으셔

바로바로 나오니까?

 

함수방식으로 코딩할 땐 return값만 만들어주면 걔가 바로 컴포넌트의 실제모양

클래스로 만들 땐 render()라고 하는 메소드를 정의해서 걔의 return값

함수 방식은 자기 자신이 render()인것

 

스타일, 왼쪽 화살표 네모 버튼 눌러서 Filesystem열고 저기서 폴더를 보고 파일을 연다

 

============================================================================

3.1. 클래스에서 state 사용법

 

 

============================================================================

3.2. 함수에서 state 사용법 hook

 

============================================================================

4.1. 클래스에서 라이프 사이클 구현하기

 

============================================================================

4.2.1. 함수에서 라이프 사이클 구현하기 - 실습준비

 

============================================================================

4.2.2. 함수에서 라이프 사이클 구현하기 - useEffect

 

============================================================================

4.2.3. 함수에서 라이프 사이클 구현하기 - clean up

 

 

============================================================================

4.2.4. 함수에서 라이프 사이클 구현하기 - skipping effect

 

============================================================================

5. 총정리 겸 수업을 마치며