[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 11일차 - Custom Hook

강경서·2023년 6월 29일

React 스나이퍼팩토리 웅진씽크빅 유데미

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

목록 보기

22/50

🧷 React Hook

React Hook는 React 컴포넌트 사이에서 공통된 로직을 재사용 하기 위해 만듬 함수입니다. 함수를 컴포넌트로부터 분리하여 재사용성과 코드 가독성을 개선해줍니다.

useState

useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.

import React, { useState } from 'react';

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

useState를 통해 "state 변수"를 선언할 수 있습니다. 위에 선언한 변수는 count라고 부르지만 banana처럼 아무 이름으로 지어도 됩니다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.

useState의 인자로는 state의 초기 값을 넘겨 줄 수 있습니다. 또한 useState가 반환하는 것은 state변수말고도 해당 변수를 갱신할 수 있는 함수또한 반환시킵니다.

useEffect

useEffect이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. useEffect를 컴포넌트 내부에 둠으로써 state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 됩니다.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
}

웹에 따라 clean-up을 이용하여 메모리 누수가 발생하지 않도록 하는것 또한 중요합니다. React는 컴포넌트가 마운트 해제되는 때에 clean-up을 실행합니다.

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

useEffect의 선택적 인수인 두 번째 인수로 배열을 넘겨 Effect를 건너뛰어 성능 최적화할 수 있습니다.

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // props.friend.id가 바뀔 때만 재구독합니다.

Hook 규칙

React 함수의 최상위에서만 Hook을 호출해야 합니다
반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안됩니다.
오직 React 함수 내에서 Hook을 호출해야 합니다
Hook을 일반적인 JavaScript 함수에서 호출하면 안됩니다. 다만 React 함수 컴포넌트 및 Custom Hook에서 호출할 수 있습니다

Custom Hook

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.

import React, { useState } from "react";

const useForm = (initialValue) => {
	const [value, setValue] = useState(initialValue);
  	const handleChange = (event) => {
    	const {target:{value, name}
        } = event;
      	setValue((pre) => ({...pre, [name]: value})
    };
    const resetForm = () => {
    	setValue(initialValue); 
    }           
    return {value, handleChange, resetForm}
}

export default useForm;

import React from "react";
import useForm from "../hooks/useForm";

const Login = () => {
  const { value, handleChange, resetForm } = useForm({ id: "", password: "" });
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(value);
    resetForm()
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="id" value={value.id} onChange={handleChange} />
      <input
        type="password"
        name="password"
        value={value.name}
        onChange={handleChange}
      />
      <input type="submit" value={"submit"} />
    </form>
  );
};

export default Login;

위와 같이 Custom Hook을 이용하여 로직을 추상화하고 컴포넌트로부터 분리하여 재사용성과 코드 가독성을 개선할 수 있습니다.

📝 후기

React를 더욱 효율적으로 사용할 수 있는 Hook에 대해서 배웠습니다. 특히 Custom Hook 생성 이유와 장점에 대해 배워 앞으로 Custom Hook을 구축할 때 더욱 신경쓰면서 만들어야 겠다는 생각을 했습니다. 지금까지는 단지 기능만 작동되면 된다는 방식으로 제작하였지만 코드의 가독성까지 생각하면서 만들어야 후의 협업과 수정 과정에서 훨씬 효율적일거라 생각했습니다.