[TIL] React - useEffect에서 Side Effect 처리하기

Today I Learned

Side Effect와 useEffect

React에서 side effect란 데이터 가져오기, subscription 설정하기, 수동으로 DOM 수정하기 등을 이른다. 비동기로 진행되는 것들 중에 많은 것들이 side effect이다. Side effect는 useEffect에 전달되는 함수(effect) 안에서 다룬다. React는 이렇게 건네받은 effect 함수를 기억했다가 DOM 업데이트 이후 불러낸다.

비동기적으로 필터된 검색 결과를 불러오기

Search Courses Demo

오늘 과제를 하고 시간이 남아서 배운 내용을 바탕으로 검색어에 따라 필터된 데이터를 비동기적으로 불러와 (여기서는 API 대신 setTimeout을 사용해 마치 네트워크 통신으로 데이터를 불러오는 것 처럼 보이게 했다) 보여주는 웹앱을 만들어보았다. API 대신 데이터를 필터하는 함수는 setTimeout에서 지정된 시간 후 fulfilled된 Promise를 리턴한다. App.js에서는 useEffect 안에서 이 Promise를 받아 then으로 연결해 결과값이 화면에 표시될 수 있도록 courseList에 넣어준다.