리액트 함수형 컴포넌트 리팩토링하기

state 컴포넌트내 상태관리 

클래스형 컴포넌트

this.state = {
  isVisible: true,
  users: [],
};

 

함수형 컴포넌트

useState 훅 사용하기

const [isVisible, setIsVisible] = useState(true);
const [users, setUsers] = useState([]);

 

useCallback

const toggleVisibility = () => {
  setIsVisible(!isVisible);
}

이 메서드는 요소를 다시 렌더링 할 때마다 다시 생성되는 문제가 있다.

 

useCallback 으로 감싸서 함수를 재사용, 캐싱할 수있다.

const toggleVisibility = useCallback(
  () => setIsVisible(!isVisible),
  [setIsVisible, isVisible]
);

useCallback 내 배열로 전달 된 setIsVisible, isVisible이 변경되면 새 콜백이 반환된다.

 

useMemo

const newUsers = useMemo(
  () => [
    {
      firstName: "Bruce",
      lastName: "Banner",
    },
    {
      firstName: "Peter",
      lastName: "Parker",      
    },      
    {        
      firstName: "Stephen",       
      lastName: "Strange",      
    },   
 ], []);

값을 재사용하는 useMemo, 

useMemo에 전달한 배열의 값이 변경 되면 업데이트 된 newUser 값이 반환된다.

 

useEffect

// bad
seEffect (() => { 
  setUsers (newUsers);     
  document.body.addEventListener ( "keydown", onKeyDown, false); 
  
  return () => document.body.removeEventListener ( "keydown", onKeyDown, false); 
}, [ setUsers, newUsers, onKeyDown]);

setUsers, newUsers 변경 시 이벤트 리스너 추가 및 제거가 호출되는 문제가 발생한다.

 

useEffect 관련 기능끼리 분리하기.

사용자 업데이트, 이벤트 리스너 처리부 분리

// Good 
useEffect (() => { 
  setUsers (newUsers);     
}, [setUsers, newUsers]);

useEffect (() => {   
  document.body.addEventListener ( "keydown", onKeyDown, false); 
  return () => document.body.removeEventListener ( "keydown", onKeyDown, false); 
}, [onKeyDown]);

retrun 으로 컴포넌트 언마운트시 해당 이벤트를 반드시 제거한다.

 

Type useState Hook

type User = {
  firstName: string;
  lastName: string;
}

const [users, setUsers] = useState<User[]>([]);

users의 타입 추론 가능하도록 정의 

 

const onKeyDown = useCallback(
  ({ key }: KeyboardEvent) => {
    if (key === "t") {
      toggleVisibility();
    }
  },
  [toggleVisibility]
);

const newUsers = useMemo(
  () => [
    // Our user list
  ] as User[],
  []
);