[React] 함수형 컴포넌트와 클래스형 컴포넌트의 차이

React 에서 컴포넌트를 만들 때 함수형, 클래스형 총 2가지 방식이 있다.
기존에는 클래스형 컴포넌트를 사용했지만, react v 16.8 이후로 Hook 이 지원되며 함수형 컴포넌트로 사용할 것을 권하고 있다
이 두가지 방식의 차이점을 알아보자

선언 방식의 차이

클래스형

class App extends React.Component {
  render() {
		const name = 'class';
		return <div>{name}</div>
  }
}

• class 키워드가 필요
• Component 로 상속을 받아야 한다
• render() 메서드가 반드시 필요
• state, liefeCycle 관련 기능 사용이 가능하다
• 함수형보다 메모리 자원을 더 사용한다
• 임의 메소드를 정의할 수 있다

함수형

const App = () => {
  const name = 'function';
  return <div>{name}</div>
}

• lifeCycle 관련 기능 사용이 불가능
  👉🏻 Hook 을 통해 해결
• 클래스형보다 메모리 자원을 덜 사용한다
• 컴포넌트 선언이 비교적 간편

state 차이

state?

• 컴포넌트 내부에서 바뀔 수 있는 값

클래스형

class App extends React,.Component {
  constructor (props) {
    super(props)
    this.state = {
      test1: [],
      test2: '',
      test3: 10
    }
  }
  testFunction = () => {
    this.setState({test3: test3 + 1})
  }
  render() {
    const name = 'class'
    return <div>{name}</div>
  }
}

• constructor 안에서 this.state 로 초기 값 설정 가능
• constructor 없이, 바로 state 초기 값 설정 가능
• this.setState() 를 통해 state 를 업데이트 시켜줄 수 있다
• 클래스형의 state 는 객체형식

함수형

const App = () => {
  const [test1, setTest1] = useState([])
  const [test2, setTest2] = useState('')
  const [test3, setTest3] = useState(0)
  
	const testFunction = () => {
    setTest3(test3 + 1)
  }
  
  const name = 'function'
  
  return (
  <div>
    {name}
  </div>
  )
}

• useState Hook 으로 state 를 사용한다
• useState Hook 으로 호출하면 배열이 반환되는데, 첫번째 원소는 현재 state, 두번째 원소는 state 를 업데이트 시켜주는 함수

props 차이

props ?

• 컴포넌트의 속성을 설정한다
• 읽기 전용. 수정할 수 없다
• 모든 컴포넌트는 자신의 Props 를 다룰때 반드시 순수함수처럼 동작해야 한다

클래스형

class App extends Component {
  render() {
    const {age, name} = this.props
    return <div>{name}의 나이는 {age}살 입니다</div>
  }
}

• this.props 를 통해 값을 불러 올 수 있다

함수형

const App = ({name, age}) => {
	const test = 'function'
  
  return (
  	<div>
    	{name}의 나이는 {age}살 입니다
    </div>
  )
}

• 비구조 할당을 해서 props 를 불러올 필요 없이 바로 호출 가능

이벤트 핸들링에서의 차이

클래스형

class App extends React.Component {
  constructor (props) {
    super (props)
    this.state = {
      number: 1
    }
  }
  handleBtn = () => {
    this.setState({number : number + 1})
  }
  render () {
    return (
    	<div>
      	<button onClick={this.handleBtn}> 추가 버튼</button>
      </div>
    )
	}
}

• 함수 선언 시 화살표 함수로 바로 선언 가능
• 적용할 때 this 를 붙여 주어야 한다

함수형

const App = () => {
  const [number, setNumber] = useState(1)
  
  const handleBtn = () => {
    setNumber(number + 1)
  }
  
  return (
  	<div>
      	<button onClick={handleBtn}> 추가 버튼</button>
    </div>
  )
}

• const 와 함수 형태로 선언
• 적용할 때 this 필요가 없다