함수형 컴포넌트, React-Hooks

JavaScript React

2023-03-05

클래스형 vs 함수형 컴포넌트

클래스형 컴포넌트

import { Component } from 'react';

class New extends Component{
  render(){
    return <div> This is a Class type component. </div>
  }
}

export default New

함수형 컴포넌트

function New(){
  return <div> This is a Function type component. </div>
}

export default New

function New = () => <div> This is a Function type component. </div>

export default New

함수형 컴포너트란 함수를 기반으로 작성하는 컴포넌트를 말한다. 기존의 클래스형 컴포넌트에 비해 훨씬 간결하고 직관적이다.

클래스형 <-> 함수형 컴포넌트가 공존 가능하다.

함수형 컴포넌트의 한계, 그리고 React-Hooks

함수형 컴포넌트의 직관성과 가독성은 클래스형 컴포넌트보다 훌륭하나, 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없었으나, React-Hooks가 도입되면서 함수형 컴포넌트에서 라이프사이클 메소드 기능을 사용할 수 있게 되었다. React 공식 docs에서 Hooks 사용을 권장하는 글

대표적인 Hooks 에는 useState, useEffect가 있다.

import { useState, useEffect } from 'react'

function New(props) { // 다른 컴포넌트에게서 받은 데이터
  const [state] = useState({}) // 컴포넌트 안에 보관해 둘 데이터
  useEffect(() => {
    // 컴포넌트가 최초 그려진 후 실행
  }),
  useEffect(() => {
    // 컴포넌트가 변경되었을 때 실행
  })
  return <div> This is a Function type component. </div>
}

export default New

state

컴포넌트에서 사용하는 변수

setState

컴포넌트에서 사용하는 변수(state)를 바꿔주는 기능

useState

컴포넌트에서 사용하는 변수(state)를 만들어주는 기능.

// 자바스크립트에서 변수 만들기
// 변수생성자 변수명 = 담을내용
let classmate = '철수'

// 리액트 컴포넌트에서 변수 만들기
// const [변수명] = 변수생성자(담을내용)
const [classmate] = useState('철수')

// 자바스크립트에서 변수 바꾸기
let classmate = '철수'
classmate = '영희'

// 리액트 컴포넌트에서 변수 바꾸기
// const [변수명, 변수변환자] = 변수생성자(담을내용)
const [classmate, setClassmate] = useState('철수')
setClassmate('영희') 