React Hooks - UseState, UseEffect

React Hooks

Class 형식의 react는 여러가지 방면에서 Function 형식보다 복잡하다.
state는 객채 형식으로 통합적으로 관리해야 하며 setstate를 할때는 state를 뜯었다가(?) 통합하는 방식으로 해야 한다.
게다가 lifecycle 형식(componentDidMount, componentWillunmount...)도 따로따로 사용해야 하는 복잡함도 가지고 있다.

그런데 기존 function 형식의 react는 state와 lifecycle을 지원하지 않았다. 그래서 function 형식에서 state와 side effect를 제어할 수 있는 React Hooks가 나오게 된 것이다.

UseState

Class 형식의 react에서는 다음과 같이 state를 사용할 것이다.

class Count extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
      <div>
    당신의 카운트는 {this.state.count}이다
    </div>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
       </button>
      </div>
  
}

//reference : React 공식 가이드 
//https://ko.reactjs.org/docs/hooks-state.html

state 전체를 다루고 있으며 setstate를 통해 state의 일부분을 바꿔주는 형식을 사용한다.

반면에 Hooks는 state를 관리하기 편한 형식으로 작성된다.

function Count (){
  const [count, setCount] = useState(0);
  
  return (
    <div>
    <div>
    당신의 카운트는 {count}이다
    </div>
    <button onClick={() => setCount(count+1)}>
          Click me
       </button>
    </div>
  
}

위와 같이 사용하게 되면서 얻는 장점은

1. state를 따로 관리할 수 있다.

각각의 state는 독집적인 값들을 가지고 있으므로 상속이 쉬워지고 오류수정이 용이해진다.

2. 작성이 쉽다.

딱봐도 this나 구조 재할당의 필요없이 바로 변수 뒤에 있는 setstate이름만으로도 편하게 state를 변경할 수 있으니 눈에 잘 들어온다.

이러한 점때문에 class보다는 function을 사용하는 react hooks를 더 많이 쓰게 된다고 볼 수 있다.

UseEffect

기존 react의 componentDidmount나 componentDidupdate와 같은 method를 사용하지 않아도 useEffect만으로 구현할 수 있다.

function Count (){
  const [count, setCount] = useState(0);
  
  useEffect(()=>{
    //componentDidmount
    console.log(`현재 count는 ${count}이다`);
  },[])
  
  useEffect(()=>{
    //componentDidupdate
    console.log(`너는 ${count}를 눌렀다.`);
    //componentWillunmount
    return ()=>{
      console.log(`너는 ${count}를 지웠다.`)
    }
  },[count])//마지막 부분은 state의 값
  return (
    <div>
    <div>
    당신의 카운트는 {count}이다
    </div>
    <button onClick={() => setCount(count+1)}>
          Click me
       </button>
    </div>
  
}

deps 부분에 아무내용도 사용하지 않는다면 첫 랜더링시 mount부분을 보여주며 state를 통해 의존성을 부여해줄수도 있다.

state를 넣어주게 되면 state가 변함에 따라 useEffect를 통해서 랜더링이 될 것이며 이를 통해 side effect를 사용할 수 있게 된다.