Hooks

📌 useState

 

React의 state machine에 연결하는 기본적인 방법

 

동적으로 바뀌는 값을 관리할 때 사용

 

/*기본 형태
  item: state를 통해 담은 data
  setItem: item을 변경하는 함수
  1: 초기값 (어떤 값이라도 don't care)
*/
const [item, setItem] = useState(1);

 

🔍 예제 (Counter)

 

Increment 클릭할 때마다 item 1 증가

Decrement 클릭할 때마다 item 1 감소

 

function App() {
  const [item, setItem] = useState(1);
  const incrementItem = () => setItem((current) => current + 1);
  const decrementItem = () => setItem((current) => current - 1);
  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
    </div>
  );
}

 

📌 useEffect

 

React 컴포넌트가 렌더링 될 때마다 특정 작업(effect)을 실행할 수 있도록 하는 React Hook

 

React의 생명주기

 

https://dev-rootable.tistory.com/137

React의 생명주기

 

 

Hook 이 클래스 컴포넌트의 기능을 사용하기 위해 만들어진 것으로 클래스 컴포넌트에서 사용하는 다음 생명주기 메서드의 기능을 모두 수행한다.

 

• componentDidMount
• componentDidUpdate
• componentWillUnmount
• getDerivedStateFromProps

 

🔍 useEffect(callBackFunc)

 

렌더링 될 때마다 (컴포넌트가 마운트 된 후, 업데이트된 후, 언마운트 되기 전) 실행된다.

 

위 4가지 생명주기 메서드를 모두 사용한 것과 동일

 

🔍 useEffect(callBackFunc, [])

 

컴포넌트가 최초 렌더링되었을 때만 실행된다.

 

=> componentDidMount 역할

 

🔍 useEffect(callBackFunc, [state1, state2])

 

최초 렌더링된 후 state1 또는 state2가 변경되었을 때 실행된다.

 

=> componentDidUpdate, getDerivedStateFromProps 역할

 

✔ number 가 변경되었을 때 sayHello() 실행

 

function App() {
  const sayHello = () => console.log("hello");
  const [number, setNumber] = useState(0);
  const [aNumber, setAnumber] = useState(0);
  useEffect(() => {
    sayHello();
  }, [number]);
  return (
    <div className="App">
      <div>Hi</div>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  );
}

 

🔍 useEffect(() => { return(() => func()) })

 

cleann-up 함수(리턴하는 함수)를 활용하여 컴포넌트가 언마운트될 때 정리하거나 unscribe 해야 할 것을 처리한다.

 

=> componentWillUnmount 역할

 

 

 

 

References:

 

https://velog.io/@sukong/REACT-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0%EC%99%80-useEffect-Hook

[React] 리액트의 생명주기와 Hook

 

https://nomadcoders.co/react-hooks-introduction

실전형 리액트 Hooks 10개 – 노마드 코더 Nomad Coders