[211022] React #04 : function & class

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작.

금일 진도는 202P ~ 245P.

목차로는 02. 리액트 클래스 스타일 vs 함수 스타일 (챕터 02, 끝)

1. function & class

React에는 컴포넌트 생성 방법이 2가지임.

하나는 funciton, 하나는 class.

 

기존에 function 방식보다 class 방식이 선호됐던 이유는, 

function에서는 state 값을 가질 수 없고 + 라이프 사이클 함수를 사용할 수 없었다.

 

하지만 2019년 2월 6일에 릴리즈한 React v16.8부터 function에서도

state와 라이프 사이클 함수를 활용할 수 있게 도와주는 훅(Hook)이 도입되면서, class보다 function 방식에 익숙한 이들에게 환영받는 중이다.

 

아래는 초간단한 컴포넌트를 각각의 방식으로 만든 예제다.

function FuncComp(){
  return (
    <div className="container">
      <h2>function style component</h2>
    </div>
  )
}

class ClassComp extends Component{
  render(){
    return (
      <div className="container">
        <h2>class style component</h2>
      </div>
    )
  }
}

function 타입은 return으로 컴포넌트의 형태를 정의하며

class는 render 함수내에 return으로 컴포넌트의 형태를 정의한다.

 

2. props

class에선 props가 this.props에 담겨져있었지만

function에서는 아래와 같이 파라미터로 전달받게 된다.

function FuncComp(props){
  return (
    <div className="container">
      <h2>function style component : {props.name}</h2>
    </div>
  )
}

3. state

class에서 state를 정의하는 방법은 constructor내에 정의해야한다고 했지만...

생략해서 아래와 같이 정의해도 해석되게 되었다고한다(react state without constructor)

class ClassComp extends Component{
  state = {name: 'Grey'}
  render(){
    return (
      <div className="container">
        <h2>class style component : {this.state.name}</h2>
      </div>
    )
  }
}

 

function에서는 Hook을 사용하는데, Hook은 use 라는 prefix를 가지고 있다.

state에 관여하는 Hook은 useState, 라이프 사이클과 연관된 Hook은 useEffect이다.

 

useState는 2개의 값을 리턴하며,

하나는 state의 실제 변수, 하나는 setState 함수이다.

import React, {useState} from 'react';

function FuncComp(props){
  let [age, setAge] = useState(34); 
  return (
    <div className="container">
      <h2>function style component</h2>
      <h3>Name : {props.name}</h3>
      <h3>Age : {age}</h3>
      <input type="button" value="increase" onClick="{
        function(){
          setAge(++age);
        }
      }"></input>
    </div>
  )
}

위와 같이 선언하고, age라는 변수에 state가 담기고 해당 값의 변경이 필요하면 setAge 라는 setState에 대응되는 함수를 호출하면 된다.

 

 

4. 라이프사이클

vue의 create, mounted와 같이 react도 라이프사이클을 가진다.

위 그림 출처는 : 리액트 Lifecycle API 인데, react 17 버전부터 위와같으며

기존에 사용 할 수 있었던 componentWillMount, componentWillReceiveProps, componentWillUpdate의 3개 API는 17 버전 이후로 deprecated 되었다고한다(물론, 여전히 사용할 수는 있다. 하지만 아래와 같이 콘솔에 Warning을 띄워댄다)

 

4-1. useEffect

다시 본론으로 돌아와서,

기존에 React에서는 이런 라이프 사이클 API를 class 방식으로 선언시에만 사용가능했다.

그래서 function에서는 useEffect라는 Hook을 추가함으로써 function 방식에서도 라이프 사이클 API를 사용할 수 있게끔 뚫어놓았다.

 

useEffect는 첫번째 전달인자로 함수를 가지며, 두번째 전달인자로 해당 effect가 발동될 state를 지정할 수 있다.

(여기서 발동될 state를 지정한다는 것의 의미는, react는 state가 변경되면 해당 컴포넌트를 리렌더링해야하는데...이는 update타이밍에 따른 라이프 사이클이 호출되는 경우를 염두해 둔 것이며, 추가로 state별로 서로 다른 라이프사이클 API를 정의할 수 있다는 장점도 가지고 있다)

// 컴포넌트 mount시 최초 1회만 실행
useEffect(function(){
    console.log('%cfunc => useEffect (componentDidMount)' + +(++funcId), funcStyle);
    document.title = 'Grey';
}, []);

// number에 대해서만 발동
useEffect(function(){
    console.log('%cfunc => useEffect number (componentDidMount & componentDidUpdate)' + +(++funcId), funcStyle);
    document.title = number;
}, [number]);

// date에 대해서만 발동
useEffect(function(){
    console.log('%cfunc => useEffect _date (componentDidMount & componentDidUpdate)' + +(++funcId), funcStyle);
    document.title = _date;
}, [_date]);

위와같은 형태가 기본인데,

빈배열이면 componentDidMount 시점에 발동되며, 감시할 state가 빈배열이기 때문에 최초 1회만 실행된다.

배열에 값이 있을 경우, componentDidMount시점에 발동되고 + 이후에 배열내의 해당 값들이 변경되면 componentDidUpdate 라이프사이클 시점에 동작한다.

 

4-2. clean-up

정리,의 개념이다.

useEffect로 발동된 내용에서 정리될 내용이 있을 경우 호출되는 부분인데...

아래와 같이 useEffect의 첫번째 파라미터로 전달된 함수의 반환값에 함수로 정의하면 된다.

// 컴포넌트 mount시 최초 1회만 실행
useEffect(function(){
    console.log('%cfunc => useEffect (componentDidMount)');
    document.title = 'Grey';
    return function(){
        console.log('func => useEffect number return (componentWillUnmount)');
    }
}, []);

// number에 대해서만 발동
useEffect(function(){
    console.log('func => useEffect number (componentDidMount & componentDidUpdate)');
    document.title = number;
    return function(){
        console.log('func => useEffect number return (componentDidMount & componentDidUpdate)');
    }
}, [number]);

// date에 대해서만 발동
useEffect(function(){
    console.log('func => useEffect _date (componentDidMount & componentDidUpdate)');
    document.title = _date;
    return function(){
        console.log('func => useEffect number return (componentDidMount & componentDidUpdate)');    
    }
}, [_date]);

위와같이 return으로 function을 반환해주면...

Vue로 비유하자면 v-if가 false되서 해당 컴포넌트가 지워지게되면 clean-up으로 정의된 함수가 호출되게 된다.

 

5. 기타

이 외에도 useContext, useReducer, useMemo등의 훅이 더 있다니까...

나중에 마저 찾아서 정리하자.