[Computer Science] 클래스형 컴포넌트 vs 함수형 컴포넌트

React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다
과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다.

함수형 컴포넌트를 선호하는 이유 (장점)

• 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면, 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다.
• Hook들을 필요한 곳에 사용하며 로직의 재사용이 가능하다.
• 리렌더링 될 때의 값을 유지한다.
• 함수형 컴포넌트는 props에 따른 렌더링 결과를 보장받는다.
• 함수의 모든 장점을 이용할 수 있다.
• 함수형 컴포넌트를 사용했을 때 코드가 간결해지고 가독성도 좋다.

차이점

1) 선언방식

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

class App extends Component {
  render() {
    const name = "클래스형 컴포넌트"
    return <div>{name}</div>
  }
}

• 함수형 컴포넌트
  • state, lifeCycle 관련기능 사용 불가능하다. [Hook을 통해 해결]
  • 클래스형보다 메모리 자원을 덜 사용한다.
  • 컴포넌트 선언이 편하다.

const App = () => {
  const name = "함수형 컴포넌트"
  return <div>{name}</div>
}

2) state

📌 State 란?
컴포넌트 내부에서 바뀔 수 있는 값

• 클래스형 컴포넌트
  • constructor 안에서 this.state 초기 값 설정 가능
  • constructor 없이도 바로 state 초기값을 설정 가능
  • this.setState()를 통해 state값을 변경
  • 클래스형의 state는 객체형식

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      test1 : [],
      test2 : '',
      number : 1
    }
  }
  testFunction = () => {
    this.setState({ number : number + 1 })
  }
  render() {
    const name = "클래스형 컴포넌트"
    return <div>{name}</div>
  }
}

• 함수형 컴포넌트
  • useState 함수로 state를 사용한다.
  • useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 함수이다.

const App = () => {
  const [test1, setTest1] = useState([])
  const [test2, setTest2] = useState('')
  const [number, setNumber] = useState(1)
  
  const testFunction = () => {
    setNumber(number + 1)
  }
  const name= "함수형 컴포넌트"
  return <div>{name}</div>
}

3) props

📌 Props 란?

• 컴포넌트의 속성을 설정
• 읽기 전용 (컴포넌트 자체 props를 수정하면 안된다.)
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.
• 수정되는 값은 state이다.

• 클래스형 컴포넌트
  • this.props를 통해 값을 불러올 수 있다.

class App extends Component {
  render() {
    const {number, testName} = this.props
    const title = "클래스형 컴포넌트"
    return <div>{testName}의 나이는 {number}살 입니다.</div>
  }
}

• 함수형 컴포넌트
  • props를 불러올 필요 없이 바로 호출할 수 있다.

const App = ({ number, testName }) => {
  const title = "함수형 컴포넌트"
  
  return (
    <div>{testName}의 나이는 {number}살이다.</div>
	)
}

4) 이벤트 핸들링

• 클래스형 컴포넌트
  • 함수 선언시 화살표 함수로 바로 선언 가능하다.
  • 요소에 적용할 때 this.를 붙여줘야한다.

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      number : 1
    }
  }
  onClickFunc = () => {
    this.setState({ number  : number + 1 })
  }
  render() {
    const title = "클래스형 컴포넌트"
    return(
      <div>
      	<button onClick={this.onClickFunc}>+1 버튼</button>
	  </div>
	)
  }
}

• 함수형 컴포넌트
  • const + 함수 형태로 선언해야 한다.
  • 요소에 적용할 때 this가 필요 없다.

const App = () => {
  const [number, setNumber] = useState('')
  
  const onClickFunc = () => {
    setNumber(number + 1)
  }
  const name = "함수형 컴포넌트"
  return(
    <div>
      <button onClick={onClickFunc}>+1 버튼</button>
	</div>
  )
}

5) Life Cycle

📌 Life Cycle 이란?

• 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클, 즉 컴포넌트의 수명주기가 존재한다.
• 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
• 라이프사이클은 크게 세가지 유형으로 나눌 수 있는데 생성 될 때, 업데이트 할 때, 제거 할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다.
• React에서 컴포넌트는 여러 종류의 "생명주기 메소드"를 가지며 이 메소드를 오버라이딩(상속하여 재정의)하여 특정 시점에 코드가 실행되도록 설정한다.
• 클래스 컴포넌트에만 해당되는 내용이며, 함수형 컴포넌트는 Hook를 사용하여 생명주기에 원하는 동작을 한다.

Reference

참고 : 왜 함수형 컴포넌트를 사용하는가
참고 : 함수형 컴포넌트와 클래스형 컴포넌트의 차이 - 태어난김에 개발자