[#. React] Functional Component 함수형에서 사용할 수 있게 된 React Hooks 정리하기

 

 

 

 

React Hooks 

v16.8에 도입

기존 React에서 Class Component에서만 사용 가능하던 state, lifecycle 기능을
Functional Component에서도 useState, useEffect로 사용할 수 있도록 추가된 기능

 

 

이 state, lifecycle 기능 때문에 React-Native로 cuckoo 앱을 만들 때는 Class Component를 사용했었다
클래스형, 함수형을 코드로 확인해보자

 

 

 

 

 

Class Component vs Functional Component

 

① Class Component

import React, { Component } from 'react';
import Axios from 'axios';

export default class Shab extends Component {
   
   constructor(props) {
      super(props)
      this.state = { name: "" }		¹
   }

   componentDidMount() {		²
      Axios.get('/api/user/name') 
         .then(response => {
         this.setState({ name: response.data.name })
      })
   }
	
   render() {
      return (
         <div>
            My name is {this.state.name}
         </div>
      )
   }
}

 

 

 

② Functional Component

import React, { useState, useEffect } from 'react';
import Axios from 'axios';

function Shab() {

   const [Name, setName] = useState("")		¹

   useEffect(() => {				²
      Axios.get('/api/user/name')
         .then(response => {
            setName(response.data.name)
         })
   
   }, [])

   return (
      <div>
         My name is {Name}
      </div>
   )
   
}

 

 

state => useState

lifecycle => useEffect

 

대체하고 있는 걸 볼 수 있다

 

 

 

 

 

React의 Lifecycle

Mounting	Updating	Unmounting
constructor
render
componentDidMount	componentDidUpdate	componentWillUnmount

=> 기존에 Class Component에서만 사용 가능하던 Lifecycle이 Functional Component에도 useEffect로 사용 가능

 

 

 

 

useEffect(fn, []) 실행 시점

useEffect(() => {})	useEffect(() => {}, [])	useEffect(() => {}, [state])	useEffect(() => { return (console.log("unmount") )}, [])
렌더링 될 때마다 실행	첫 렌더링 시 한 번 실행	state 값이 변경될 때마다 실행	화면이 종료될 때 실행
	componentDidMount	componentDidUpdate	componentWillUnmount

 

 

 

 

클래스형을 사용하다 함수형을 사용해보니 확실히 코드가 간결해졌다