functional Component

함수형 컴포넌트를 공부하면서 느낀점은 "클래스보다 편리하다!"였다.
함수형 컴포넌트에서는 bind(this)를 할 필요도 없고 state로 지정하고 싶은 내용을 변수에 바로 변수에 닮을 수 있었다.

코드로 이해해보자.

useState

코드를 아래와 같이 작성해보자.

function App() {
	return (
    	<div className="container">
        	<FuncComp initNumber={2}></FuncComp>
        </div>
}

function FuncComp(props) {
	const numberState = useState(props.initNumber);
    console.log(numberState);
}

위의 사진과 같이 numberState는 배열값을 반환하게 된다.
여기서 첫번째 즉 numberState[0]은 현재의 상태값을 의미한다.
두번째 numberState[1]은 상태를 변경시킬 수 있는 함수가 들어있다.
우리가 어떠한 상황이 예를 들어 onClick을 등록하여 클릭시 값이 변경하게 할 경우 numberState[1]를 변수에 닮아 값을 변경시켜줄 수 있다. 맨밑에 일괄 코드를 보면 이해를 할 수 있을 듯 하다.
나는 편의상

const [number, setNumber] = useState(props.initNumber);

로 작성하여 number = useState[0], setNumber = useState[1] 을 구성하였다.

class Component와 다른점

우선 return부분을 살펴보자.
전시간에 class Component에서는 state의 값을 변경하기 위해서는 setState를 사용해야했다. 코드를 통해 차이점을 보도록 하자

함수형
<input type="button" value="random" onClick={
      function() {
        setNumber(Math.random());
      }
}></input>

클래스형
<input type="button" value="random" onClick={
     function(){
       this.setState({
         number:Math.random(),
       })
     }.bind(this)
}></input>

무려!!!! 3줄이나 더 길어😱😱😱

함수형 같은 경우는 우리가 상태값을 변경시켜주는 함수를 닮아논 변수에 바로 변경값을 넣어주면 된다.
나는 이점에서 함수형의 편리성을 느꼇다.

useEffect

  //side effect Hook
  useEffect(function() {
    // class에서 componentDidMount & componentDidUpdate 와 같은역할
    console.log('%cfunc => useEffect'+(funcId)+"  count: "+(count),funcStyle);
    console.log("훅이 감시? 하고 있다가number이 바뀌면 리턴값을 반환한다.")
    document.title = number;
    console.log(number);
    return function() {
      console.log('%cfunc => return useEffect'+(funcId)+"  count: "+(++count),funcStyle);
    }
  },[number]); //감시할대상을 적어준다. ex) [number];

다시한번 놀랐다. useEffect(Hook)를 사용하게되면 state의 값을 변경시킬 수 있고 그 값이 변경되었는지 확인까지 할 수 있었다.

useEffect(function() {
	document.title = number;
}, [number]);

위와같이 작성할 경우 number값이 변할경우 인식하여 실행되게 된다. 마지막 부분에 무엇을 감시? 할지 적어주어야하는데 그 부분이 [number]이다.

useEffect(function() {
  	document.title = number;
  	return function() {
    	   console.log('%cfunc => return useEffect'+(funcId)+"  count: "+(++count),funcStyle);
  	}
},[number]);

버튼을 누르기 전

버튼을 누른 후

위와 같이 변경되기 전에는 리턴함수가 실행되지 않지만 값이 변경되었을 시 return값을 반환 후 함수가 돌아가는걸 볼 수 있다. 이 점을 활용하면 좀 더 state를 관리하는데 있어 편리함을 얻어갈 수 있을 것 같다.

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

function App() {
  return (
    <div className="container">
      Hello World
      <FuncComp></FuncComp>
    </div>
  );
}


const funcStyle = 'color:blue';
var funcId = 0;
var count = 0;

function FuncComp() {
  const [number, setNumber] = useState(Math.random); // 아래 두줄을 이렇게 한줄로 만들 수 있다.
  // const number = numberState[0]; //상태값
  // const setNumber = numberState[1]; // 상태를 바꿀 수 있는 함수
  const [_date, setDate] = useState((new Date()).toString());

  // side effect, Hook
  useEffect(function() {
    //class에서 componentDidMount & componentDidUpdate 와 같은역할
    console.log('%cfunc => useEffect'+(funcId)+"  count: "+(count),funcStyle);
    console.log("훅이 감시? 하고 있다가number이 바뀌면 리턴값을 반환한다.")
    document.title = number;
    console.log(number);
    return function() {
      console.log('%cfunc => return useEffect'+(funcId)+"  count: "+(++count),funcStyle);
    }
  },[number]); //감시할대상을 적어준다. ex) [number];

  useEffect(function() {
    class에서 componentDidMount & componentDidUpdate 와 같은역할
    console.log('%cfunc => useEffect'+(funcId)+"  count: "+(count),funcStyle);
    console.log("훅이 감시? 하고 있다가 _date이 바뀌면 리턴값을 반환한다.")
    document.title = _date;
    console.log(_date);
    return function() {
      console.log('%cfunc => return useEffect'+(funcId)+"  count: "+(++count),funcStyle);
    }
  },[_date]);

  console.log('%cfunc => render'+(++funcId),funcStyle);
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <p>Now : {_date}</p>
      <p>함수형은 버튼 두개로 만들어보자!</p>
      <input type="button" value="random" onClick={
          function() {
            setNumber(Math.random());
          }
        }></input>
      <input type="button" value="date" onClick={
        function() {
          setDate((new Date()).toString());
        }
      }></input>
    </div>
  )
}