CS 공부 - front

[React] 함수형과 클래스형의 장단점 비교

Nuri-KSLV-II 2023. 2. 15. 18:00
  함수형 컴포넌트 클래스형 컴포넌트
선언방식 1. state, lifeCycle 관련 기능 사용 불가(v16.8부터 Hook으로 해결)
2. 클래스형보다 메모리 자원을 덜 사용
3. 컴포넌트 선언이 편함
1. class 키워드 필요
2. render() 메소드 반드시 필요
3. Component로 상속을 받야함
4. state, lifeCycle 관련 기능 사용 가능
state 1. useState 함수로 state를 사용
2. useState 함수를 호출하면 배열이 반환되는데 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수
1. constructor 안에서 this.state 초기 값 설정 가능
2. this.setState()를 통해 state값을 변경
props 1. props를 불러올 필요 없이 바로 호출 가능 2. this.props를 통해 값을 불러올 수 있음
이벤트 핸들링 1. const + 함수 형태로 선언
2. 적용 시 this 필요 없음
1. 함수 선언시 화살표 함수로 바로 선언 가능
2. 적용 시 this 필요함

 

함수형 컴포넌트를 선호하는 추세

1. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI로직

2. 함수형 컴포넌트는 데이터를 받아서(props) UI에 뿌려줌으로서 상대적으로 단순

3. Hook을 활용해 로직의 재사용 가능

 

 

참고

https://born-dev.tistory.com/27

'CS 공부 - front' 카테고리의 다른 글

[React] 가상돔  (0) 2023.02.15
[JS] var vs let vs const  (0) 2023.02.15
[웹] 브라우저 렌더링 동작 과정 - 렌더링 엔진  (0) 2023.02.12
[JS] 동기 처리와 비동기 처리  (0) 2023.02.02
[JS] 콜백 함수  (0) 2023.02.02