<React> 💎 Hook - useState & useEffect

오늘은 useState를 좀더 알아보고 useEffect도 소개해보려고 합니다. useEffect는 function Component에서도 life cycle method를 사용할 수 있게 해줍니다.

useEffect

useEffect는 class Component의 componentDidMount와 componentDidUpdate를 합쳐놓았다고 할 수 있습니다. 그래서 콜백함수만 전달하게 되면 mount될 때, update될 때 모두 콜백함수를 호출하게 됩니다.

Q) 그렇다면 mount될 때만 콜백함수를 호출하고 싶다면 어떻게 할까요?
A) 두번째 인자로 빈 배열을 전달하면 됩니다.

Q) 특정 state나 props가 업데이트 될 때도 콜백함수를 호출하고 싶다면 어떻게 할까요?
A) 특정 state나 props를 포함한 배열을 두번째 인자로 전달하면 됩니다.

따라서 DOM에 직접 접근한다던가 비동기 통신을 한다던가를 여기서 해주면 되겠습니다.

useState

useState를 통해 function Component에서 state를 사용하고 변경하는 방법을 알아보겠습니다.

• setName
  setName에 인자로 name에 할당될 값을 전달한 것입니다. 이게 실행되고 나면 minseok을 화면에서 확인할 수 있게 됩니다.

import React, {useState} from 'react';

function App(){
  const [name, setName] = useState("");
  
  const onChange = e => {
    setName(e.target.value);
  }
  
  return (
    <>
      <input 
        type="text"
     	value={name}
        onChange={onChange}
      />
      <b>name:</b> {name} 
    </>
  );
}

export default App;