클래스형 vs 함수형 컴포넌트 차이점 (React)

리액트에서 컴포넌트를 선언하는 방식은 두 가지가 있다.

1. 클래스형 컴포넌트(class component)
2. 함수형 컴포넌트(function component)

요즘에는 대부눈 함수형 컴포넌트를 많이 사용하지만, 클래스형 컴포넌트를 만났을 때
해석할 줄 알아야 하기 때문에 클래스형 컴포넌트를 살펴보려 한다.

함수형 컴포넌트

function FunctionComponent () {
	return (
		<div>
			<h1>Hello, I am function component</h1>
		</div>			
)}
클래스형 컴포넌트

class Mycomponent extends Component

render() {
	return(
  		<div>
      		<h1>Hello there</h1>
      	<div>
   
    )
}

클래스형 컴포넌트는 return문 위에 render()메서드가 있고, return문 내부에서 JSX 문법을 작성한다.
state와 props를 다루는 방식도 알아보자

import { Component } from 'react'
class Mycomponent extends Component {
  constructor() {
    super()
    this.state = {
      city: 'Chicago'
    }
  }

  render() {
    // const { name } = this.props
    // const { city } = this.state 이렇게 선언하면 return 문 내부에서 this.state 를 쓰지 않고 
    //	{city} 만 작성해도 된다.
    return (
      <div>
      <h1>Hello there {this.props.name}, {this.state.city}</h1> 
<button onClick = {()=> this.setState({city:'Boston'})}>Change city</button>
	 </div>	
		)
	}
}

컴포넌트 사용시 React component를 import 해준다
부모컴포넌트로부터 props를 받을시 아래와 같이 작성한다

constructor(props) super(props)
props에 접근할 때 render() 아래 영역에 변수를 선언해서 사용해도 된다.

state 사용시 constructor()에서 state를 선언한다. return () 내부에서 setState를 사용한다.
클릭버튼에 실행되는 함수를 바깥에서 선언해보자

import { Component } from 'react'
class Mycomponent extends Component {
  constructor() {
    super()
    this.state = {
      city: 'Chicago'
    }
    this.handleClick = this.handleClick.bind(this) 
    // handleClick 함수 외부에서 선언 후 
    //  constructor에서 this로 bind!
    console.log('I am Constructor')
  }

  handleClick () {
    this.setState({city: 'New York'})
  }

  componentDidMount() {
    console.log('I am Did Mount')
  }

  componentDidUpdate() {
    console.log('I am Update')
  }

  render() {
    const {name} = this.props
    const {city} = this.state

    console.log('I am Render')

    return (
      <div>
      <h1>Hello there {name}, {city}</h1>
<button onClick = {this.handleClick}>Change city</button> 
</div>	
		)
	}
}

1) 클릭 버튼 함수를 외부에서 사용할 경우 항상 'this'를 작성해야 한다.
2) 외부에서 선언만 해두면 작동하지 않는다. constructor () 안에서
this로 bind를 해줘야 'setState' 가 작동한다

3) class 컴포넌트에서 코드가 작동하는 순서 => 위에서 아래 순서로 작동한다.
    'I am Constructor'
	'I am Render'
	'I am Mount'     // 각각 위치에 콘솔을 찍어서 확인!
	'I am Render'   // 첫번째로 Constructor() 작동하고 Render()가 실행되면서 랜더링이된다. 
	'I Did Update' // 그 다음 Render 바깥에 있는 DidMount가 작동하고 Change city 버튼을 누르면
	'I am Render' // Render() 가 다시 작동하면서 도시를 바꿔주면서 
                     Update 실행 버튼을 한번 더 누르면
	'I Did Update'// Render() 가 작동하고 도시상태를 Update 해준다