React의 Hooks은 함수 컴포넌트에서 사용되어 기존의 클래스형에서만 가능하던 기능들을 함수 컴포넌트에서도 사용 가능하게 했습니다.

종류를 간단하게 확인하면서 평소 몰랐던 내용이나 중요한 내용을 대해 정리해보겠습니다.

useState

const [a,setA] = useState('')
이 함수가 호출되면 배열을 반환합니다.
첫번째는 상태 값, 두번째는 상태를 설정하는 함수 입니다.

useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 설정합니다.

마운트 될 때만 실행

맨 처음 렌더링될 때만 실행되게 하고 싶을 때 사용합니다.

useEffect 의 함수의 두번째 파라미터로 비어있는 배열을 넣어주면 됩니다.
useEffect({()=>func()},[])

특정 값이 업데이트만 될 경우 실행

배열 안의 값에 적힌 값이 변할 경우에 실행됩니다.
useEffect({()=>func()},[a])

뒷정리하기

컴포넌트가 언마운트되기 전이나, 직전에 작업을 수행할 경우는 cleanup 함수를 반환해줍니다.

useEffect(()=>{
	console.log("hi")
  	return()=>{
    	console.log("bye")
    }
},[])

컴포넌트가 나타날 때 hi 가 나타나고, 사라질 때, bye가 나타납니다.

이럴 경우는 어떨까요?

useEffect(()=>{

  	return()=>{
    	console.log(name)
    }
},[name])

상황은 input을 통해 name이 바뀌는 경우입니다.
글자가 바뀔 때마다 뒷정리 함수가 계속 나타납니다. 그리고 뒷정리 함수는 업데이트 되기 직전의 값을 보여줍니다.
그래서 보통은 두번째 파라미터 빈값으로 오직 언마운트 될 때만 사용하는 편입니다.

지금부턴 평소 잘 안쓴 Hooks입니다.

useReducer

useReducer는 리덕스 내용과 밀접하게 닿아있습니다.
상태관리를 위해 자주 사용되는 기술입니다.

useMemo

함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다.
렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 하고, 원하는 값이 바뀌지 않았다면, 이전에 연산했던 결과를 다시 사용하는 방식입니다.

---

const Sheets = () => {
  const [nums, setNums] = useState<number[]>([]);
  const [num, setNum] = useState(0);
  const plus = () => {
    setNum(0)
    setNums([...nums, num]);
  };
  const getAverage = ()=>{
    console.log("getget");
    const sum = nums.reduce((a,b)=>a+b)
    return sum / nums.length
  }
  return (
    <div>
      <h1>{getAverage()}</h1>
      <label>nums</label>
      <input
        value={num}
        onChange={(e) => setNum(Number(e.target.value))}
      ></input>
      <button onClick={() => plus()}>추가</button>
    </div>
  );
};

이런 기능이 있습니다. 인풋에 입력한 값이 리스트에 들어가 리스트의 평균을 구해줍니다.

여기서는 인풋을 입력할때마다 "getget" 이 호출됩니다.
사용하지도 않는 함수가 계속 호출된다는 것이죠.

이걸 useMemo를 통해 바꿔보겠습니다.

<h1>{getAverage}</h1> 을 변수로 만들어 사용합니다.

const avg = useMemo(() => getAverage(), [nums]);

<h1>{avg}</h1>

nums가 바뀔때마다 함수를 실행시키기 때문에 필요없는 연산을 줄일 수 있습니다.

useCallback

useMemo와 비슷한 기능입니다.
만들어 놨던 함수를 재사용할 수 있습니다.

컴포넌트가 리랜더링 될 때마다 새로 만들어진 함수를 사용해야 하는데, 컴포넌트의 렌더링이 자주 발생하는 경우는 최적화 해주는 것이 좋습니다.

함수를 선언할 때 사용합니다.

  const plus = useCallback(() => {
    setNums([...nums, num]);
    setNum(0);
  },[nums,num])

number 나 list가 바꼈을 때만 함수를 생성한다는 뜻입니다. 빈 값이 오면 컴포넌트가 처음 렌더링 됐을 때만 함수를 생성하는 것입니다.

여기서는 num과 nums를 조회해서 nums를 생성하기 때문에 꼭 넣어줘야 합니다

useRef

ref를 쉽게 사용할 수 있게 합니다.

const inputEl= useRef(null);
inputEl.current.focus();
<input ref={inputEl}/>
이와 같이 사용하면 함수를 사용했을 때 focus가 넘어가게 됩니다.

포커스 뿐 아니라 로컬 변수를 사용할 때도 useRef를 사용합니다. 렌더링과 관계없는 값을 의미합니다.