#1 HOOK (useState / useEffect)

useState

import React, { useState } form 'react'

const [state, setState] = useState(initialState);

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

최초로 렌더링 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자의 값과 같습니다.

setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

setState(newState);

// React 공식 홈페이지 문서에서 발췌
function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

"+"와 "-" 버튼은 함수 형식을 사용하고 있고 이것은 갱신된 값이 갱신되기 이전의 값을 바탕으로 계산됩니다.

반면, "Reset" 버튼은 카운트를 항상 0으로 설정하기 때문에 일반적인 형식을 사용합니다.

업데이트 함수가 현재 상태와 정확히 동일한 값을 반환한다면 바로 뒤에 일어날 리렌더링은 와전히 건너뛰게 됩니다.

 

useEffect

import React, { useEffect } form 'react'

useEffect(didUpdate);

 

간단하게 생명주기를 알아야합니다.

react life cycle 공식 문서

• componentDidMount()는 컴포넌트가 마운트된 직후, 즉 트리에 삽인됩 직후에 호출
• componentDidUpdate()는 갱신이 일어난 직후에 호출 / 조건문으로 감싸줘 무한 반복을 방지
• componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출

Effect는 componentDidMount와 componentDidUpdate와는 다를게, useEffect로 전달된 함수는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후 발생합니다. 이것은 구독이나 이벤트 핸들러를 설정하는 것과 같은 다수의 공통적인 부작용에 적합합니다. 이유는 대부분의 작업이 브라우저에서 화면을 업데이트하는 것을 차단해서는 안 되기 때문입니다.

 

useEffect는 부라우저 화면이 다 그려질 때까지 지연됩니다. 하지만 다음 어떤 새로운 렌더링이 발생하기 이전에 발생하는 것도 보장합니다. React는 새로운 갱신을 시작하기 전에 이전 렌더링을 항상 완료하게 됩니다.

 

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

여기 useEffect는 갱신마다 새로운 구독이 생성된다고 볼 수 있습니다. 갱신마다 불필요한 수행이 발생하기 때문에 다음 절을 참고하세요.

 

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

effect의 기본 동작은 모든 렌더링을 완료한 후 effect를 발생합니다. 이와 같은 방법으로 의존성을 추가해준다면 매 갱신때마다 useEffect문이 수행되지않고 특정 조건이 갱신될 때만 useEffect문을 수행하게 할 수 있습니다. 위의 코드에서 ㅔprops.source라는 값이 변경될 때에만 구독이 재생성될 것입니다.

 

useEffect 코드 정리

useEffect(() => {
    console.log('Mount 될 때만 실행됩니다.');
}, []);

useEffect(() => {
    console.log('Rendering 될 때만 실행됩니다.');
});

useEffect(() => {
    console.log(name);
    console.log('name이라는 변수가 update 될 때만 실행됩니다.');
}, [name]);
//Component가 update 될 때 (특정 props, state가 바뀔 때)

useEffect(() => {
    console.log('Mount 될 때만 실행됩니다.');
    return () => {
        console.log('Unmount 될 때만 실행됩니다.')
}, []);
//Component가 Unmount 될 때 & Update 되기 직전에 실행

UseEffect는 주로 API를 호출 할 때 사용합니다. (fetch, axios ....)