Hooks란?

기존 함수형 컴포넌트에서는 상태(state)를 저장과 라이프사이클 등을 사용할 수 없었다..함수가 실행되고 나면 메모리 상에서 사라지기 때문!!그래서 상태를 저장하고 라이프사이클 메소드들은 클래스형에서 지원을 했었는데 함수형 컴포넌트에서 Hooks가 생기고 그것들을 흉내낼 수 있게 되었다. 클래스형에서는 Hooks를 사용할 수 없다.

• Hooks는 그저 함수 이다.
• React에는 4가지(useState, useEffect, useRef, useReducer)가 있고 이 외에도 커스텀 훅이 존재합니다.
• 컴포넌트 사이에서 상태관련 로직을 재사용하기 용이하다.(HOC,render props)
• 코드가 간결해지고 이해하기 쉬워진다.(관심사 분리, LifecycleAPI)
• 배포 시 빌드 과정에서 class형보다 함수형이 최적화 로직이 간단하다.
• 최상위에서만 Hook을 호출해야한다.(커스텀 훅 제외)

State Hook

useState

const [state, setState] = useState(initialState);
상태 값과 상태 값을 변경하는 함수를 반환, 최초로 렌더링 하는 동안 state 값은 useState의 첫번째 인자(initialState) 값 입니다.

클래스형 컴포넌트와 함수 컴포넌트 비교

// 클래스형 컴포넌트
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

import React, { useState } from 'react';
// 함수 컴포넌트
function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);
	const [isModalActive, setIsModalActive] = useState(false);
	// 안 좋은 예시
	const [state, setState] = useState({
		color: "red",
		isActive: true,
		name: "jt".
		password: "sdaf"
	})
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
			<button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button>
    </div>
  );
}

useState()하나에 모든 상태값을 관리하지 말고 연관 있는 요소를 묶어서 관리하라!
1.

function Box() {
  const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 });
  // ...
}

function Box() {
  const [position, setPosition] = useState({ left: 0, top: 0 });
  const [size, setSize] = useState({ width: 100, height: 100 });

  useEffect(() => {
    function handleWindowMouseMove(e) {
      setPosition({ left: e.pageX, top: e.pageY });
    }
    // ...

useEffect

useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.

useEffect(() => {실행할 내용}, [의존성 배열])

1.useEffect (componentDidMount & componentWillUnmount)

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`; // CDM
  }, []);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2.useEffect (componentDidUpdate)

// componentDidUpdate - count 바뀔 때만
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.