메가테라 프론트엔드 생존코스 4주차 회고

3주차에 이어 늦은 4주차 회고록을 작성해본다.

 

4주차에서는 Hooks에 대해 공부하는 시간이었다.

 

Hooks란 무엇인가?

간단히 설명하자면, 함수 컴포넌트 내에서 state와 lifecycle 기능을 hook(함수 컴포넌트에서 React의 고급 기능을 끌어다 쓸(hook into) 수 있게 해주는 도구 )할 수 있게 해준다.

 

hooks에는 useState, useEffect, useRef 등이 있다.

 

useState : 함수 컴포넌트에서 state를 관리할 수 있다.

const [count, setCount] = useState(0);

count는 state의 값을 갖고 있고, setCount는 setter 함수로 state를 변화시키기 위한 함수이다.counst의 값을 변경해주고자 한다면 

setCount(()=>count+1);

이런 식으로 setCount를 통해 해야만 상태에 반영된다.

 

useEffect : 사이드 이펙트(side effects)를 수행할 수 있다.

useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []); // 두 번째 인자에는 배열을 안 주거나, [](빈 배열), [value1, value2](특정 값)을 줄 수 있다.

빈 종속성 배열을 사용하게 되면 마운트될 때 한 번만 수행하게 된다.

두 번째 인자로 제공되는 배열은 의존성 배열(dependency array)로 빈 배열일 때는 마운트 될 때 한 번 수행하고, 특정 값들을 포함하는 배열일 경우 특정 값이 변할 때 마다 수행하고, 아무런 배열을 주지 않을 땐 컴포넌트가 렌더링 돌 때마다 수행하게 된다.

useEffect는

클린업 작업을 할 때 사용할 수도 있다.

 

useRef : ref( reference,참조)객체를 반환하며, DOM 접근 뿐만 아니라 일반적인 변수를 저장하고 유지하는 데 사용될 수 있다. 그리고 ref는  current라는 프로퍼티를 가지며, 이 프로퍼티에는 변경 가능한 값을 저장할 수 있다. 그리고 값을 보존하는 동안 컴포넌트의 재렌더링을 발생시키지 않는 방법을 제공하기 때문에 특정한 경우 매우 유용하게 쓰일 수 있다.

const myInputRef = useRef(null);

function focusOnInput() {
  myInputRef.current.focus();
}

return <input ref={myInputRef} />;

const timerID = useRef(null);

useEffect(() => {
  timerID.current = setInterval(() => {
    console.log('Tick!');
  }, 1000);

  return () => {
    clearInterval(timerID.current);
  };
}, []);

Vue.js에서 사용되는 ref와는 비슷한듯 다른 개념이었다.

 

 

hooks라는 개념이 Vue.js에서는 없다시피 해서 평소보다 더 집중해서 공부해야했다.

아직까지도 완전히 이해한 상태는 아니어서 몇 번 더 반복학습할 필요가 있을 것 같다.