TIL 72일차_React hook : basic

State Hooks

const [item, setItems] = useState([]);

여기서 item은 state 변경 이전의 값으로 고정된다. 따라서 비동기와 관련된 고민을하지 않아도 된다!
useState의 인자를 전달하여 초기값을 설정할 수 있다. useState(1) → item === 1;
useState의 두 번째 요소에 값을 전달하는 것이 일반적인 사용 방식인데, 함수도 쓸 수 있다.

import React, { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p> 클릭한 횟수: {count} 번 </p>
      <button onClick={() => setCount(count + 1)}></button>
    </div>
  );
};

export default Example;

Effect Hooks

const { language } = props
  const [checked, setChecked] = React.useState(false);

  React.useEffect(() => {
    fetch(`https://ur8ist29gg.execute-api.us-east-1.amazonaws.com/dev/youtube-data?q=${checked}`)
    .then(data => data.json())
    .then(data => {
      setItems(data.items)
    })
  }, [language])
//  }, []) // 1. 두 번째 인자 배열 요소가 없으면(빈배열이면) componentDidMount처럼 mount시 1회만 작동
//  }) // 1-1. 두 번째 인자 없으면 rerender가 필요할 때 마다 작동합니다.
//  }, [language]) // 2. 배열의 요소가 변경이 되면, useEffect의 첫 번째 인자 callback이 실행됩니다.

useEffect 메서드는 클래스 컴포넌트의 라이프사이클메서드르 대신한다.
cDM과 cDU를 합친것과 같은데,
우선 컴포넌트 렌더시 1회 호출되며 (cDM)
이후, 두번째 인자 배열요소가 변화하면 다시 호출된다.(cDU)
이때, 두번째 인자배열요소에는 state,props가 들어가는 것이 일반적이다.
두번째 인자배열요소 외의 다른인자의 변화에는 렌더링하지 않으므로,
개발자가 렌더링을 컨트롤 할 수 있다는 점이 가장큰 장점이다.

이외

• useReducer
  • 특정 조건에 작동되게 하는 useState
• useCallback
• useMemo
  • 계산이 많이 필요한 작업의 경우, 미리 결과값을 메모리에 저장해놓는 기법을 useState에 적용한 것이다.