리액트 : TIL

useMemo와 LazyInitializaion

리액트 함수형 라이프 사이클에 따르면, useMemo는 component가 마운트되기 직전에 실행된다. useState() 역시 비동기적으로 처리된다.

이에 따라 useEffect내부의 함수 등의 비동기 함수와는 사용할 수 없다. 함수의 선언 순서대로 작동한다는 보장을 하지 않는다.

한번만 쓸 변수를 초기화 하기 위해 아래와 같이 처리하였는데 undefined를 뱉어냈다.

  const today = useMemo(() => {
    const now = new Date();
    const newDay = now
      .toLocaleDateString()
      .split(' ')
      .map((e) => {
        return e.replace('.', '').padStart(2, '0');
      })
      .join('-');
    return newDay;
  }, []);
 
  const [day, setDay] = useState(today)

useMemo로 값을 설정하지 않고도, computed된 값을 useState의 initial value로 사용하는 방법은 'lazy initialization'이다. 값을 반환하는 함수를 initial value로 넘겨주면 한 번의 연산만 실행된다.

위의 예시를 lazy initialization

  const [day, setDay] = useState(() => {
    const now = new Date();
    const today = now
      .toLocaleDateString()
      .split(' ')
      .map((e) => {
        return e.replace('.', '').padStart(2, '0');
      })
      .join('-');
    return today;
  });

useState와 useEffect

위 문제를 해결한 이후,
useEffect 내부에 day라는 state를 쓰면 여전히 undefined를 뱉어낸다.

useEffect(()=>{}, [])//undefined

의존자에 day를 추가해주면 된다.

useEffect(()=>{}, [day])

day가 undefined일 때에는 연산을 하지 않도록 if(!!day)를 추가해준다. 이때 유의할 점은 useEffect 함수는 조건문 안에 선언될 수 없다는 점이다.

if(!!day) { useEffect(()=>{ }, [day]) } // warn: useEffect가 조건적으로 선언되었습니다 휴먼.

아래와 같이 useEffect 내부에 선언해주자.

useEffect(()=>{ 
if(!day) return;
 }, [day])

한편 의존자 state를 조작하는 setState는 무한루프를 일으키니 state를 의존자로 할 때에는 주의하자.

onChange를 한 번에 관리하기

아래는 회원가입을 하나의 state로 관리하는 예시이다.
메모리 낭비, 성능 낭비가 있긴 하지만 미미한 수준이다.
뇌용량 낭비보다는 아래의 패턴을 쓰자.

  const [inputs, setInputs] = useState({
    email: '',
    nickname: '',
    password: '',
    password2: '',
  });

  const { email, nickname, password, password2 } = inputs;

  const onChangeHandler = (e) => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };