Functional component 와 Class component

과거에는 class component가 더많은 기능을 제공하여 많이 사용 했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 hook을 지원해 주어 현재는 공식 문서에서 함수형 컴포넌트와 hook을 함께 사용할 것을 권장하고 있다. 오늘은 무엇이 더 좋다 혹은 어떻게 사용한다가 아닌 사용하면서 몰랐었던 부분에 대해서 정리 할 것이다.

렌더링 된 후 props 의 불변성

class component 와 Functional component 두가지 코드를 준비해 보았다.

// functional component
function ProfilePageFunc(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

// class component
class ProfilePageClass extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

같은 기능을 두가지 방법으로 표현한 코드입니다. 하지만 두 코드를 실행시키면 미묘한 차이를 발견할 수 있다.

function Test() {
 const [userName , setUserName] = useState('Soon')
 
 return(
   <div>
     <label>
	    <select value={userName} onChange={e => setUserName(e.target.value)}
   	      <option value='Soon'>Soon</option>
		  <option value='Harry'>Harry</option>
		  <option value='Hwang'>Hwang</option>
     </label>
		<p>
          <ProfilePageFunction user={userName} />
          <b> (function)</b>
       </p>
       <p>
          <ProfilePageClass user={userName} />
          <b> (class)</b>
       </p>
    </div>
   )
}

한번 순서에 맞게 따라해보자.
1. Follow 버튼을 누른다.
2. 3초가 지나기전에 선택한 profile 이름을 변경한다.

functional component 는 Follow 버튼을 누른 시점에 선택되어있는 userName을 알림창에 띄어준다. 하지만 class component 는 알림창을 띄우기 전에 변경한 값으로 변경이 된다. React 에서 props는 불변값인데 왜 이렇게 작동을 하는 것일까? 이것은 this는 변경가능하며 조작이 가능하기때문이다.

"this가 변경가능하고 조작이 가능하다." 라는 특징은 this 가 클래스에 존재하는 목적이기도 하다. 리액트는 시간이 지남에 따라 변경하기 때문에 render나 라이프 사이클 메소드를 호출할때 업데이트 된 값을 가져올 수 있다. 따라서 요청이 진행되고 있는 상황에서 Class component가 다시 렌더링 된다면 this.props도 바뀌게 되는 것이다.

위와같은 경우는 이벤트 헨들러와 props, state를 가진 render의 종속성을 timeout을 사용하며 그 종속관계를 끊어버려 올바른 props를 잃게 만든 것이다.