Next.js는 기본적으로 다양한 데이터 fetch을 제공한다. 기본적인 리액트의 useEffect 뿐만 아니라 getStaticProps 그리고 getServerSideProps까지. 우리는 여기서 늘 데이터를 어떤 방식으로 가져오게 될지 고민하게 되는데, 기본적으로 세 가지 데이터 fetch 방식을 이미 알고 있더라도, 이번에 더 자세하게 각각의 장단점과 언제 사용하면 좋을지 알아보자. 1. useEffect useEffect는 React Hook이며, 컴포넌트가 마운트될 때 또는 특정 변수가 변경될 때 코드를 실행하는 데 사용됩니다. Next.js에서 useEffect는 클라이언트 측에서 데이터를 가져오는 데 사용할 수 있습니다. 장점: 컴포넌트 로직과 데이터 가져오기 코드를 분리할 수 있습니다. ..

에러 증상은 페이지 이동시에는 새로 고침하면 API가 새로 호출되어 화면이 리렌더링 되고 있었으나, 뒤로가기 통해서 다시 해당 페이지 들어가면 리렌더링이 제대로 되지 않았다. debugger를 통한 디버깅해보니 state값이 제대로 변경되지 않고 있었다. 즉, 컴포넌트 리렌더링시 props 값은 변경되고 있으나, useEffect를 통한 state가 변경되고 있지 않았다. 비슷한 증상 stackoverflow 검색 내용을 첨부하니 참조하자. import React, { useState, useEffect } from "react"; import { Route, Redirect } from "react-router-dom"; import { checkLoggedIn } from "utils/Api"; ex..

에러 useRef를 사용시에 해당 ref(observedRef)를 console.log를 찍어보면 null로 찍힌다. function App() { const observedRef = useRef(null); console.log(observedRef.current); return ( Hello CodeSandbox Start editing to see some magic happen! ); } 해결방법 useRef는 리액트에서 DOM을 연결해주는 Hook으로써, 원하는 element에 ref 속성을 넣어주면 useRef가 객채를 반환하여 current 속성에 dom을 넣어준다. 바닐라 자바스크립트에서 document.getElementbyId. useRef 초기값에 어떤 값을 입력하더라도 null이 출..