항해99를 시작한지 벌써 15일이라는 시간이 지나고, 처음 스스로와의 약속과는 다르게 TIL를 오랜만에 작성하게 되었다. 항해99의 커리큘럼이 워낙 보통이 아니라 강의, 과제만으로도 벅차다 보니 다른 곳에 눈을 돌리는 것은 여간 쉬운일이 아니다. 앞으로는 하루를 마무리 잘 마무리 한다는 마음으로 잘 작성 해보려한다.

Side Effect란?

React 컴포넌트가 화면에 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔희 side effect라고 한다. 대표적인 예로 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하다.

간단한 예시 코드를 통해 함수형 컴포넌트의 React Hook인 useEffect의 사용법을 기록해본다. 아주 간단해 보이지만 곱씹어 본다면 그 진가를 확인 할 수 있을 것이다.

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

function UserListFunction() {
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((users) => {
        setUsers(users);
        setLoading(false);
      });
  });

  if (loading) return <div>Loading...</div>;
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}