클래스형 컴포넌트 vs 함수형 컴포넌트
1. 🧐React의 컴포넌트 종류
React의 컴포넌트 종류는 두가지가 있습니다.
클래스형
,함수형
React 버전16.8
이후HOOK
기능이 추가되어 클래스형 컴포넌트에서만 사용할 수 있었던state
,lifecycle
를 함수형 컴포넌트에서도 관리가 가능하게되었습니다.
2. ✅클래스형 컴포넌트 와 함수형 컴포넌트의 선언 방식
1) 🎯함수형 컴포넌트
import React from 'react';
import './App.css';
function App() {
const name = 'react';
return <div className = "react">{name}</div>
}
export default App;
2) 클래스형 컴포넌트
import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;
- 클래스 컴포넌트는
class
키워드가 필요하고Component
를 상속 받아야 합니다.- 함수형 컴포넌트와 다르게 클래스 컴포넌트는
render()
메소드가 반드시 있어야 합니다.
3. ✅클래스형 컴포넌트와 함수형 컴포넌트의 차이
1) state, lifeCycle 관련 기능 사용
클래스형 - 사용가능
함수형 - 사용불가능( Hook을 통하여 해결)
2) state 사용
- 🎯클래스형
- constructor 안에서 this.state 초기 값을 설정합니다.
constructor(props){
super(porps)
this.state ={
cardList= [],
card = '',
}
}
- conststructor 없이 state 초기값 설정
class cardList extends Component{
state = {
cardList = [],
card = '',
}
}
- state 객체 형식
this.state = { cardList:[]. card='',}
- this.setState함수로 state값 변경
onClick={()=>{
this.setState({number:number+1});
})
- 🎯함수형
const [name, setName] = useSate('');'
useState 함수로 state를 사용합니다.
useState 함수를 호출하면 배열이 반환되며 첫 번째 원소가 현재상태
두번째 원소가 상태를 바꾸는 함수로 사용됩니다.
3) props 사용
- props는 컴포넌트 속성을 설정할대 사용하는 요소입니다.
- 컴포넌트 자체 props를 수정해서는 안됩니다.
- 모든 react 컴포넌트는 자신의 props를 다룰때 순수 함수처럭 동작해야 합니다.
- 수정되는 것은 state가 수정됩니다.
- 🎯클래스형 컴포넌트
class cardList extends = card{ render(){ const {title, contents, DateDt} = this.props; return ( <> 카드 제목은 {title} 내용은 {contents} 작성날짜는 {DateDt}입니다. </> ) } }
- 🎯함수형 컴포넌트
props를 불러올 필요 없이 바로 호출이 가능합니다.
const cardComponent = ({title, contents}) => {
<> 카드 제목은 {title} 내용은 {contents}입니다.<>
}
4) LifeCycle
React에서 컴포넌트는 화면에 보여지고 사라지는
생성
->업데이트
->삭제
단게의 생명주기를 가집니다.
🎯클래스형 컴포넌트
Constructor
Redner
ComponentWillMount
ComponentDidMount
등의 함수로 각 lifecycle시점마다 함수가 호출되어 업데이트
🎯함수형 컴포넌트
useEffect
Hook으로 componentDidMount componentDidUpdate를 관리
useEffect(() => {
console.log('컴포넌트가 화면에 나타남')
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
},[]);
마무리
최근에는 함수형 컴포넌트를 많이 사용하지만 아직 클래스형 컴포넌트를 사용하는 기업이 있을뿐더러 현재 서비스화 하고 있는 코드들이 클래스형 컴포넌트로 되어있는경우
유지보수
를 할려면 클래스형 컴포넌트에 대해서도 숙지하고 있어야 할 것입니다.
하지만 React 공식문서에서는 함수형 컴포넌트를 권장하기에 추후 새로운 프로젝트를 만들때는함수형 컴포넌트
로 진행하는게 좋겠습니다.
Author And Source
이 문제에 관하여(클래스형 컴포넌트 vs 함수형 컴포넌트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jinseoit/React-3-16-components저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)