맨땅헤딩 프로그래밍

Toast

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다. 토스트 제거 - 현상 토스트 제거 시 이전 toasts 상태를 참조 하고 있어서 이전 상태가 같이 렌더링 되는 현상이 발생했다. // Toast.jsx ... React.useEffect(() => { if (!dismiss && autoClose) { setTimeout(() => { setDismiss(true); }, autoCloseDelay); } }, []); // useToasts.js const removeToast = id => setToasts(toasts.filter(toast => toast.id !== id)); - 발견 removeToast함수에서 s..

Tabs

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다. Fetching Data 현상 1) useEffect로 감싸지 않고 컴포넌트 내부에서 data fetching을 할 때 Data fetching하는 과정에서 state를 업데이트하면 리 렌더링이 발생하고, 컴포넌트가 리렌더링되면서 data fetcing이 다시 진행되며 무한 루프가 발생함. 2) Lazy initial state // Lazy initial state const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props); return initialState; ..