React Hooks

useState

import React, {useState} from 'react';

const Name = ()=> {
	const [age, setAge] = useState('');
  
  	const onChangeAge = (e) => {      
      setAge(e.target.value)
    }
  return(
    <div>나이 : {age}</div>
	<div><input type="text" onChange={onChangeAge} /></div>
  );
};

useState는 위의 코드처럼 사용하며, State 값을 활용할 때 사용하였다.
위 코드를 보면 setAge을 사용하여 input의 value값을 할당하여 age로 사용하였으며,
setAge에 값을 할당하여 age로 사용할 수 있기 때문에 스코프와 상관없이 전역에서 사용할 수 있다.
아래는 다양한 사용 예시

const [system, setSystem] = useState({ type: '', data: {} });
const [accountState, setAccountState] = useState({
    name: '',
    nick: '',
    bal: '',
  });
const [modalCnt] = useState('');

useEffect

useEffect는 4가지로 구분할 수 있다.
렌더링 될때마다, 최초 한번, State가 변경될 때, update전으로 사용되며,
아래 코드를 보면 useEffect...},[ ]) 의 여부 혹은 [ ]안에 어떤 state값이 들어가는지에 따라 다양하게 사용할 수 있으니, 상황에 맞게 사용하면 된다.

1. 마운트, state 변경(DidMount, DidUpdate)

useEffect( ()=> {
	console.log('렌더링 될때마다 실행');
})

2. 마운트(페이지 시작 시, 최초 한번만 실행)

useEffect(
    () => {
      console.log('최초 한번만 실행');
    },
    []
  );

3. 특정 state가 변경

const [state, setState] = useState('');
useEffect(
    () => {
      console.log('state값이 변경되면 실행');
    },
    [state]
  );

4. 언마운트, 업데이트

useEffect(
    () => {
      console.log('1');
      return () => {
        console.log('2');
      };
    },
    []
  );

위 코드는 콘솔 내용을 보면 처음 렌더링에서 1이 console창에 출력됩니다.
후에 리렌더링이 일어나게 되면 2, 1 순으로 실행되는 걸 볼 수 있으며, 업데이트가 되기 직전에 수행되어서 초기화할 때 사용했었다.

useCallback

usecallback은 주로 렌더링 성능을 고려할때 사용하는데요,
이전 프로젝트에서 개발자들과 화살표 함수와 usecallback의 퍼포먼스 비교 분석을 해보고,
초반에 모든 함수들을 usecallback으로 만들었다가 대부분 수정했던 기억이 나네요.
useCallback의 경우 리렌더링이 많이 발생하는 곳에서 사용합니다.

const [pinCode, setPinCode] = useState('');
const onInsert = useCallback(e => {
    setPinCode(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성

useCallback에서 [ ]이 빈 값이면 처음 렌더링 될 때만 함수를 생성하며,
[ ] 안에 값이 있다면 해당 값이 변경 될 때 함수를 생성합니다.

useRef

useRef는 컴포넌트에서 ref를 이동할 때 사용합니다.
해당 포커스를 원하는 위치로 이동시켜주기 때문에 유저의 편의성 및 웹 접근성을 생각할때 아주 유용한 hook입니다.

const inputFocus = useRef(null);
const onClick = () => {
    inputFocus.current.focus();
  };
return (
    <div>
      <input type="text" ref={inputFocus} />
      <button onClick={onClick}>포커스 이동</button>
    </div>
  );
};

위 코드를 보면 inputFocus에 useRef를 선언해주고, onClick함수에 cuurent.focus();
버튼을 클릭하게 되면 onclick함수에서 inputFocus.current.focus(); 내용이 실행하죠
input에 ref={inputFocus} 연결시켜놓았으므로 버튼을 클릭하게 되면 input에 포커스가 이동하게 됩니다. 위 방식으로 이전 프로젝트에서 input에 포커스

useMemo

useMemo는 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 방식으로 중복 연산을 피할 수 있기 때문에 성능을 고려하여 개발하여야 하기에 알아두어야 하는 hook이며, useMemo가 적용된 레퍼런스는 재활용을 위해서 가비지 컬렉션에서 제외되기 때문에 메모리를 더 쓰게 된다.
이전 프로젝트에서도 useMemo를 거의 사용하진 않았지만, 위에 설명한 내용과 유사한 로직이 필요한 경우에 사용할 수 있도록 알아두자.

import React, { useState, useMemo } from 'react';
const count = (x, y) => x + y;
const total = useMemo(() => count(list), [list]);

//or
const [count, setCount] = useState('');
const total = useMemo(
  () => {
    ..............
  },[count]);

위 방식으로 useMemo를 사용할 수 있다.