Class vs Function Component

💡 Component ?

“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환하는 JavaScript 함수.

함수 컴포넌트 ? - 데이터를 받은 하나의 객체 인자를 react element를 반환하는 함수. 말 그대로 "함수 컴포넌트"라고 부른다.

function New(){
	return(
    	<div>함수형 컴포넌트 작성 방법</div>
    )
}

클래스 컴포넌트 ? - React.Component를 상속받아 컴포넌트를 구성하는 형식. react.hooks가 나오기 전 function component보다 많은 기능을 제공

import { component } from 'react'

export default class New extends component{
	render(){
    	return(
        	<div>클래스형 컴포넌트 작성 방법</div>
        )
    }
}

🛠 함수형 컴포넌트와의 차이점을 조금 더 알아보자.

1. 객체 지향 프로그래밍(OOP) - 하나의 객체에 여러 기능을 구현할 수 있도록 하는 프로그래밍
클래스 형으로 작성할 경우 const / function을 사용하지 않고 메서드(실행할 기능)를 이용한다. 이렇게 만들어진 객체를 인스턴스라고 부른다.
이렇게 작성하다 보면 자바스크립트에 내장되어있는 객체의 형식을 떠올릴 수 있는데 바로 날짜를 가져올 수 있는 Date 객체.

export default class Date(){
 
  date.getFullYear()
  date.getMonth()
  date.getDate()
  // 이런식으로 실행시킬 함수 / 변수 작성
  // 하나의 클래스에 묶음(const / function 대신 메서드 이용)
  // => Date 객체 하나로 여러 기능을 사용할 수 있다.
  
 render(){
 	return()
 }
}
// 클래스형으로 작성될 경우 만들어지는 객체 -> new Date() : 객체, 인스턴스

2. class 단독으로 컴포넌트를 만들 수 없다.
변수(state)나 rerender 등을 단독으로 처리할 수 없지만 공통 기능을 가진 컴포넌트를 상속받을 수 있기 때문에 react.component를 상속받아 유효한 component로 사용할 수 있다.

3. render() / this 이용
render는 클래스형 컴포넌트에서 html 작성을 위해 반드시 적어줘야하는 메서드이다.
코드 작성 시 변수나 함수 호출 시 사진처럼 this.state.변수명 / this.함수명으로 작성.

✍🏼 this 작성 시 주의 사항
"this : 자기 자신"은 사용하는 위치에 따라 나타내는 값이 달라진다.
함수 내에서 사용한 state를 html에 불러오려면 { this.~.bind(this) }로 작성해주거나, 화살표 함수로 코드를 작성할 것 !

4. createRef로 태그를 불러오자.
코드를 작성하다 보면 태그에 이벤트를 주거나 해당 태그에 동작할 기능을 넣어줘야하는데 다양한 방식으로 태그를 함수에 불러올 수 있다.
익숙한 태그의 id값을 불러와 기능을 구현하는 부분은 여러 컴포넌트가 한 페이지에 함께 렌더링될 경우 id값이 겹치지 않아야 하기 때문에 비추천.
대신에 react에서 제공하는 Ref 기능을 이용해 태그 자체를 참조해 사용하는 것을 추천한다.

5. Lifecycle 차이

💡 Component Lifecycle

모든 react component는 생명 주기를 가지며 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트. 함수형으로 작성 시 코드가 훨씬 간단해 진 것을 볼 수 있다.
코드로 두가지의 차이점을 보자면,

class component

• DidMount() : 컴포넌트가 화면에 렌더링 된 이후 1번만 실행
• DidUpdate() : 수정이나 변경되는 부분이 생길때마다 실행
• WillUnmount() : 컴포넌트가 종료(웹에서 사라지거나)될 때 실행

  componentDidMount() {
    console.log("render된 후! 처음 한번만 그려진다");
  }

  componentDidUpdate() {
    console.log("수정(업데이트)되고 rerender 상황");
  }

  componentWillUnmount() {
    console.log("이 대화방에서 나가가겠습니다.");
  }

function component - useEffect() 이용

useEffect(() => {
    console.log("render된 후! 처음 한번만 그려진다");

  //setCount((prev)=>prev+1)
  //함수로 따로 state를 변경하는 방법 추천.
  //setCount 지정하면 state가 변경되면서 불필요하게 useEffect가 계속 렌더링됨.
  
    return () => { //함수가 종료되면서 WillUnmount의 역할
      console.log("이 대화방에서 나가가겠습니다.");
    };
  }, []);
// [] : dependency array - 의존성 배열, 배열 안의 값이 변할때만 함수 호출
//=> DidMount처럼 한번만 호출되지만 배열 안의 값이 변하면 다시 렌더링되면서 함수 호출

  useEffect(() => {
    console.log("수정되고 다시 그려짐 - rerender는 여기서");
  });
// DidUpdate와의 차이 : 최초 한번은 실행되고 변경되는 값으로 다시 실행

✍🏼 Lifecycle 호출 순서 : 기존 로드 방식 -> HTML render -> lifecycle

관련 참고 사이트 👉🏻 리액트 공식 사이트 - 생명주기 / 메서드 호출 순서, 참고 블로그