React Hooks (2)

이제 어느정도 useState를 응용해서 사용할 수 있을 것 같으니 이번엔 useEffet를 사용해보려한다!

useEffect

useEffect는 클래스 컴포넌트의 componentDidMount와 componentWillUpdatate 그리고 componentWillUnMount이다.
예시로

const [ count, setCount ] = usestate(0)
const render = () => {
	console.log('rendered!')
}
useEffect(render)

위와 같이 사용한다면 랜더링이될 때마다 콘솔이 찍힌다. (count가 변해도 찍힌다)

만약 해당값이 업데이트될 때마다 실행시키고 싶다면 아래와 같이 사용하면 된다.

const [ count, setCount ] = usestate(0)
const render = () => {
	console.log('rendered!')
}
useEffect(render, [count])

위에 같은 경우 useEffect의 두번째 인자인 count가 업데이트 될 때 마다 콘솔이 찍힐 것이다.
만약 랜더링때만 찍히고 업데이트때 콘솔이 안찍히게 하려면 빈배열을 주어도 가능하다!

useTitle

useTitle은 useEffect를 이용해 페이지의 타이틀을 변경하는 커스텀 Hooks이다.

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle)
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title")
    htmlTitle.innerText = title
  }
  useEffect(updateTitle, [title])
  return setTitle
}

const App = () => {
  const titleUpdater = useTitle("Loading...")
  setTimeout(() => titleUpdater("Home"),3000)
  return (
    <div className="App">
     <div>Hi</div>
    </div>
  );
};

코드를 보면 처음에 타이틀이 Loading...이였다가 3초뒤 Home으로 바뀐다.
작동 방식을 보면 지금은 settimeout을 3초로 줘서 그렇지만 나중에 api요청이나 비동기처리시 요청이 완료되어 데이터가 업데이트 되었을 때 현재 타이틀값을 변경하면 데이터가 변경된 것 을 useEffect가 인지하고 현재 타이틀을 변경시키는 방식이다.

useClick

useClick은 선택한 컴포넌트에 이벤트와 이벤트 발생시 동작을 주는 커스텀 Hooks다.
이것도 마찬가지로 useEffect를 사용했으며 컴포넌트를 선택하는 방법은 useRef를 사용했다.
useRef는 기본적으로 우리의 컴포넌트의 어떤 부분을 선택할 수 있는 방법이다. document.getElementByID() 를 사용한것과 동등하다.

const useClick = (onClick) => {
 
  const element = useRef();
  useEffect(() => {
    if(element.current){
      element.current.addEventListener("click", onClick)
    }
    return () => {
      if(element.current){
        element.current.removeEventListener("click", onClick)
      }
    }
  },[])
  return element
}

const App = () => {
  const hello = () => console.log("say hello")
  const title = useClick(hello)
  return (
    <div className="App">
     <h1 ref={title}>Hi</h1>
     <input placeholder="la"/>
    </div>
  );
};

작동방식은 <h1>태그에 ref 객체를 전달한다면 useRef를 사용했을 때 current 되는 태그는 <h1> 태그가 될 것이다. 그리고 ref로 받은 함수가 실행됬을 때 함수안에 있는 useEffet가 실행되고 랜더링이 되면서 클릭 이벤트를 주고 클릭 이벤트가 실행되었을 때 함수의 인자로 받은 콜백함수를 실행한다.

만약 여기까지만 한다면 componentDidMount 될때마다 current에 이벤트를 줄테니 current가 사라지면 componentDidUnMount 를 실행해 이벤트를 삭제시키고 useEffect의 두번째 인자를 빈 배열로 두어 이벤트 중복 할당을 방지한다

componentDidUnMount 는 useEffect함수를 리턴하면 그것이 unmount 될 때이다.

return () => {
      if(element.current){
        element.current.removeEventListener("click", onClick)
      }
    }

아직 useRef 사용법이 미숙한거 같다 좀 더 갖고 놀아봐야겠다...