nextjs (3) 썸네일형 리스트형 Component Life cycle 기본개념 컴포넌트의 생명주기 * mount 페이지에 장착됨 : 컴포넌트 로드될때 사용 * update 업데이트됨 : 컴포넌트 업데이트될때 사용 * unmount 필요없을때 제거됨 : 컴포넌트 삭제될때, 다른페이지로 넘어갈때 과거 class로 만든 컴포넌트일때는 ComonentDidMount(), ComonentDidUpdate(), ComonentWillUnmount와같은 함수를 사용했다고한다. 이제는 useEffect훅으로 컴포넌트의 생명주기에 따른 조종이 가능하다. 마운트, 재랜더링될때마다 실행하고싶을때 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ 로드될때(mount), 업데이트될때마다 실행됨 console.. React와 Next js 이미지 경로 여러가지 방법 Nextjs에서 이미지 경로는 어떻게 설정해야할까? 나의 경우는 public폴더내 images라는 폴더를 새로 생성하여 아이콘들을 넣어두었다. nextjs에서는 public을 절대경로로 인식하고있는 것이 특징이다. 참고로 리액트에서는 배포시 src에있는 모든 파일들을 번들링(html, css, js를 압축)하지만 pubic은 압축하지않는다. heart라는 아이콘을 꺼내기 위해 다음과 같이 경로를 설정하였다. nextjs에서 권장하지않는 방법 do not! 배포시 public바로안에다할 경우 큰문제는없을수있지만 images처럼 만약 public안에 서브폴더를 이용할경우 뜻하지않게 경로를 인식하지못할수도있기때문에 환경변수 process.env를 활용하는것이 권장된다.(하단의 CRA 공식사이트 참고) next.. Nextjs getServerSideProps 예시 [문제발생] 프로젝트중 리액트 useEffect훅을 사용하다가 랜더링 문제에 직면하였다. 문제의 코드 function Post() { const [list, setList] = useState([]) const [commentList, setCommentList] = useState() const [isLoading, setIsLoading] = useState(true) const router = useRouter() const { pid } = router.query const url = `${HOST}/article/${pid}` const getData = async () => { const res = await axios.get(url) setList({ article: res.data.arti.. 이전 1 다음
