Hook #1

React-Hook

React의 클래스형 컴포넌트는 재사용 가능한 행동을 붙이기 위해서 render props와 HOC와 같은 패턴을 사용해왔다. 하지만 이런 패턴을 사용할 때 컴포넌트를 재구성해야 하며 코드를 추적하기 어렵게한다. Hook은 계층 변화 없이 상태관련 로직을 재사용할수 있도록 도와준다.

규칙

• 최상위에서만 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때 마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
• 오직 React함수 내에서 Hook을 호출해야한다.

const [state, setState] = useState()
// Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

const example = () => {
  const [state, setState] = useState()
  useEffect(() => {
    if (name !== '') {
    console.log("hi")
    }
  },[])
  /* 
  if (name !== '') {
   	useEffect(() => console.log("hi"),[])
  } 
  오류를 발생시킬 수 있다.
  */
}

useState

• useState를 사용해서 함수형 컴포넌트 안에 state를 추가할 수 있다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지됩니다. useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다.
• React는 useState가 함수 동일성이 안정적이고 리렌더링시에도 변경되지 않을 것이라는 것을 보장하기에 useEffect나 useCallback 의존성 목록에 함수를 포함하지 않아도 된다.

const Example = () => {
  const [count,setCount] = useState(0); 
  // useState안에 초기값을 설정할 수 있다.
  return (
    <div>{count}</div>
  )
}

useEffect

• useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되기 때문에 변형, 구독, 타이머, ajax 또는 다른 부작용을 일으키는 행동을 하는 것에 적합하다.

const Example = () => {
  useEffect(() => {
    ajax...
  })
}

• 종종 컴포넌트가 화면에서 제거될 때 정리해야하는 행동이 있다. 가령 구독이나 타이머ID와 같은 것들입니다. 이것을 수행하기 위해서 useEffect로 전달된 함수는 정리함수를 반환할 수 있다.
• 정리함수는 메모리 누수 방지를 위해 UI에서 컴포넌트를 제거하지 전에 수행됩니다. 만약 컴포넌트가 여러 번 렌더링 된다면 다음 effect가 수행되기 전에 이전 effect는 정리된다.

useEffect(() => {
  const timer = setTimeout(() => console.log("hi"),1000)
  return clearTimeout(timer)
}

• effect가 종속되어 있는 값의 배열을 useEffect의 두번째 인자로 제공할 경우, 의존성의 변경의 유무에 의해 effect를 재생성할지를 결정한다.

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);
// props.source가 변경될 때에만 구독이 재생성될 것이다.

• effect를 실행하고 이를 정리하는 과정을 딱 한 번씩만 실행하고 싶다면, 빈 배열을 두 번재 인수로 넘기면 된다.

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [],
);

• effect Hook을 여러번 사용함으로써 하나의 생명주기에 따라서가 아닌 코드가 무엇을 하는지에 따라 나눌 수 있다.

const Example = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Yout clicked ${count} times`;
  });
  
  const [isOnline, setIsOnline] = useStaet(null);
  useEffect(() => {
    const handleStatusChange = (status) => setIsOnline(status.isOnline)
    ...
  }
  ...
}