훅스는 언제 쓰일까?

useState : 변수대신

useEffect : 특정 작업에만 동작하도록 하고싶을때 사용

  1. useEffect(( ) ⇒ { 로직 } , [ 디펜던시 어레이 ] )

  2. 디펜던시 어레이의 상태값이 변화할경우에만 useEffect가 실행

    useEffect(() => {
  // do something
}, [dependencyArray]);

    가령, 만약 렌더링 후에 디스크립션을 업데이트하고 싶다면 다음과 같은 코드를 사용할 수 있습니다.

    const [desc, setDesc] = useState('');

useEffect(() => {
  setDesc('Description updated!');
}, [desc]);

    useEffect는 return값을 가질 수 있습니다. 예를 들어 만약 렌더링된 훅을 제거하고 싶다면 다음과 같은 코드를 사용할 수 있습니다.

    useEffect(() => {
  // do something

  return () => {
    // do something when unmounting
  };
}, [dependencyArray]);

    가령, 만약 렌더링 훅이 비활성화되면 제거하고 싶다면 다음과 같은 코드를 사용할 수 있습니다.

    useEffect(() => {
  const disabledHandler = () => {
    // do something when disabled
  };

  return () => disabledHandler();
}, [desc]);

useRef : 값의 변화를 주는데 렌더링은 해주고싶지않을때

  1. 어떠한 값을 저장공간으로 두고 렌더링 하지않음 ⇒ state와의 차이점.
  2. state가 변화되어 리렌더링이 되어도 Ref의 값은 유지
  3. DOM 요소에 접근 (input focus()를 주려고)
const inputEl = useRef(null);

useEffect(() => {
  // focus the input element
  inputEl.current.focus();
}, []);

<input ref={inputEl} type="text" />

useContext : 주구장창 prop전달하는 복잡함을 해결. 전역적 데이터 사용

  1. ThemeContext를 만들어주고 ( createContext )

Untitled

Untitled