[React] useEffect, useState 사용하기

React Hook

"함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동, 연결 (hook into) 해주는 함수"

훅의 장점으로는

1. 로직을 한 군데로 모을 수 있다
2. 단순한 함수이기 때문에 정적타입 언어에서도 쉽게 타입을 작성할 수 있다.
3. 여러 훅끼리 조합이 가능해서 재사용 가능한 로직을 만들 수 있다.

따라서 클래스형 컴포넌트의 단점을 커버할 수 있는데요! 리액트 훅의 사용으로 진입장벽을 낮춰주었다고 합니다.

해당 훅을 사용하기 위해 아래의 코드를 상단에 입력해줍니다.(훅을 사용할 때 직접 입력됩니다.)

import { useEffect, useState } from "react";

1. useState()란..?

const [counter, setValue] = useState(0); #1
const [keyword, setKeyword] = useState(""); #2

useState는 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다.

1. 최초로 렌더링하는 동안, 반환된 counter는 첫 번째로 전달된 인자(0)의 값과 같습니다. setValue함수는 counter를 갱신할 때 사용합니다. 그리고 새 counter를 받아 컴포넌트에 리렌더링을 합니다.

2. 1번 코드와 마찬가지로, 최초로 렌더링하는 동안, 반환된 keyword는 첫 번째로 전달된 인자""의 값과 같습니다. setKeyword함수는 keyword를 갱신할 때 사용합니다. 그리고 새 keyword를 받아 컴포넌트에 리렌더링을 합니다.

  const onClick = () => setValue((prev) => prev + 1); #1
  const onChange = (event) => setKeyword(event.target.value); #2

다음 리렌더링 시에 useState를 통해 반환받은 천 번째 값은 최신화된 state가 됩니다.

1. 해당 코드는 클릭을 할 때 숫자 0이라는 첫 value를 이전 값prev에 들여보내고 +1을 하게 됩니다.
2. 해당 코드는 값의 변화로 onChange가 발생하면 event로 지정하고, text를 가지고 있는 event의 값을 가져옵니다.

2. useEffect()란..?

기본적으로 useEffect는 화면에 렌더링이 완료된 후에 전달된 함수를 실행합니다. 그리고 계속해서 호출, 구독 등을 할 필요가 없기에 맨 처음 한 번만 실행합니다.
또 useEffect는 브라우저 화면이 다 나타날 때까지 지연되지만, 다음의 새로운 렌더링이 발생하기 이전까지 완료된다는 것이 보장됩니다.

 useEffect(() => {
    console.log("Keyword changes");
  }, [keyword]); #1
  useEffect(() => {
    console.log("Counter changes");
  }, [counter]); #2
  useEffect(() => {
    console.log("Keyword+Counter changes");
  }, [counter, keyword]); #3

1. 해당 코드는 [keyword]가 변화될 때 log창에 "Keyword changes"을 입력합니다.
2. 해당 코드는 [counter]가 변화될 때 log창에 "Counter changes"을 입력합니다.
3. 해당 코드는 [keyword, counter]가 변화될 때 log창에 "Keyword+Counter changes"을 입력합니다.

---

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here.."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

그리고 useState와 useEffect 훅으로 얻은 값들은 리턴을 해 줍니다.

참조문서 : React 문서