React의 라이프 사이클 이해 및 API 로딩 처리 구현하기

라이프 사이클

1. constructor()
2. componentwillCount()
3. render()
4. componentDidMount()

props 혹은 state의 갱신 시에는 shouldComponentUpdate() 실행하여 render()를 불러오고 뷰를 갱신한다.

React는 상태의 변화를 알아서 감지해서 뷰를 재구성한다.

결국 우리는 상태만 잘 관리하면 됨

로딩 처리

수정 사항

아래 코드와 같이 프로그레스 바의 상태 처리를 위한 수정을 진행한다.

const [customers, setCustomers] = useState("");
const [completed, setCompleted] = useState(0);

useEffect(() => {
  const callApi = async () => {
    const response = await fetch('/api/customers');
    const body = await response.json();
    return body;
  };

  const timer = setInterval(() => {
    setCompleted((prevCompleted) => (prevCompleted >= 100 ? 0 : prevCompleted + 1));
  }, 800);

  callApi()
    .then(res => setCustomers(res))
    .catch(err => console.log(err));

  return () => {
    clearInterval(timer);
  };
}, []);

기존에는 로딩되지 않으면 빈 문자열을 출력한 것과 달리 프로그레스 바를 출력하기 위한 구문을 3항 연산자의 false 실행 부분에 추가한다.

<TableRow>
  <TableCell colSpan="6" align="center">
    <CircularProgress sx={{margin:theme.spacing(2)}} variant="determinate" value={ completed }/>
  </TableCell>
</TableRow>

colSpan: 열을 n개만큼 채우겠다.
variant="determinate": 끝 이있는 프로그레스를 사용하겠다.

로딩바 안보임

처리가 너무 빨라서 안보이는 것 뿐이다.

서버에 로딩 지연을 부과할 필요가 있다.
callApi() 함수를 실행하지 않으면 된다.

callApi() 선언부를 날리던 실행부를 날리던 하면 로딩창이 정상적으로 나옴을 알 수 있다.

코드 상세

API 호출

• callApi()는 비동기 함수다. 이 함수는 /api/customers에 HTTP 요청을 보내고 JSON 응답을 받는다.

로직 상태 관리

• setInterval()은 800 밀리초마다 setCompleted 함수를 호출한다.

Cleanup()

• useEffect 훅의 반환 값은 컴포넌트가 언마운트될 때 실행되는 정리 함수다.
• 컴포넌트가 사라질때까지 타이머가 계속 실행되는 것을 방지하고, 메모리 누수를 예방한다.

useEffect의 빈 의존성 배열('[]')은 이 훅이 컴포넌트가 마운트 될 때 한번만 실행되도록 한다.
결국 API 호출과 타이머 설정은 컴포넌트의 첫 렌더링 시에만 수행되며, 언마운트 될 때는 정리되도록 합니다.

오류 처리

sx 사용

sx={{...}}

처럼 중괄호를 2개 감싸야한다.

value 전달

value를 컴포넌트에 전달할 때 JSX에서는 JS 표현식을 줄괄호로 감싸야한다.