20220203_TIL : Component

리액트에서 함수형으로 컴포넌트를 작성하는 법 외에 클래스형 (구글링할 때 많이 접했던)으로 컴포넌트를 작성하는 방법이 있었다.

💡 함수형과 클래스형의 차이

• react 기본 제공 기능 'component' import
• hooks 사용 불가(useState, useRouter ...)
• 함수를 호출하거나 변수를 지정 방식 (this.setState, this.함수명 ...)
• componentDid... / Will... -> useEffect 사용 변화
  ⭐️ Lifecycle 실행 순서 : HTML render 이후 실행 !
• const / function -> 메서드 이용

import { Component } from 'react';
// class 방식으로 state 변수나 rerender 등 component의 기능을 할 수 없다.
// 공통 속성을 상속받을 수 있는 class 특징을 이용
// -> react에서 제공하는 Component를 가져와서 만들 수 있다.

export default class SamplePage extends Component{
    state = {
        count : 0
    }
	
	함수명(){
    	console.log("카운트가 증가합니다.")
      	this.setState(변경될 값) //this는 위치에 따라 기준이 다르기 때문에
    }

//onClick으로 부를 함수에 .bind(this)를 안쓰려면 화살표 함수로 작성해야한다.
	함수명 = () =>{
    	console.log("카운트가 증가합니다.")
      	this.setState(변경될 값)
    }
    
	render(){ // HTML 공간 render(){return(...)}
    	return(
        	<div>
          		<div>카운트 : {this.state.count}</div>
				<button onClick={this.함수명.bind(this)}>증가</button>
          	<div>
        )
    }
}

코드로 보면 확실히 차이점이 와닿기 때문에 클래스 컴포넌트도 해석하고 함수형으로 바꾸는 방법도 숙지할 필요가 있겠다.

👩🏻‍💻 오늘의 TIL ...

설 연휴가 끝났으니 이제 몇일이 남았나.. 그새 한달의 루틴이 낯설어진 것 같다ㅎㅎ.. 얼른 정신 차리고 다시 규칙적인 일상으로 복귀하도록하고.. 오늘 배운 컴포넌트를 만드는 두 가지 방법에 대해 알게되었으니 관련 부분 마무리해보자.

✔️ class / function 두 방식 비교 정리
✔️ component lifecycle 주요 메서드 사용에 대한 개념 숙지
✔️ 실습한 class component를 직접 함수형으로 바꿔보는 연습

참고하면 좋을 블로그 👉🏻 라이프사이클 & 메서드 호출 순서