개발 공부/NextJS5 [Next js] server Component에서 client Component로 변수를 보낼 때 주의사항 (에러: Warning: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to .. 웹 페이지의 성능을 위해서 server component와 client component를 함께 사용하는 경우가 많다. server component에서 client component로 변수를 전달할 때 발생하는 에러이다. Warning: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props. 이 에러는 전달하는 props가 복잡한 object일 때 발생했다. (나의 경우에는) 해결하는 방법은 간단하다. object였던 변.. 2023. 11. 15. [Next js] use client?! 서버 컴포넌트, 클라이언트 컴포넌트에 대해서 알아보자 Next js에서 컴포넌트를 작성하면 기본적으로 서버 컴포넌트를 작성하게 된다. export default function Cart() { return ( Cart ); } function CartItem() { return ( 상품명 $40 1개 ); } 하지만 서버 컴포넌트는 onClick을 넣거나 react의 useState, useEffect와 같은 코드를 동적으로 실행할 수 없다. 그래서 이런식으로 html에 자바스크립트 기능을 넣기 위해서는 클라이언트 컴포넌트로 구현해야 한다. 방법은 굉장히 간단하다. 'use client' 클라이언트 컴포넌트로 만들고 싶은 파일의 최상단에 'use client' 한 줄만 추가하면 된다. 2023. 11. 13. [Next js] img가 아닌 Image를 사용해보자 img 태그는 정말 많이 사용하는 태그일 것이다 하지만 layout shift (이미지가 로딩되기 전과 후의 크기 차이가 있을 때 밀리는 현상)이나 lazy loading, 사이즈 최적화를 위해서는 Image 컴포넌트를 사용하도록 하자 import Image from 'next/image' import food0 from '/public/food0.png' export default function List() { let products = ["Tomatoes", "Pasta", "Coconut"]; return ( 상품목록 {products.map((item, i) => { return ( {item} 이것은 물건입니다. 그것에 대한 설명을 이렇게 마구 써놨습니다 ); })} ); } 여기서 주의사항은.. 2023. 11. 13. [Next js] a태그를 사용하지 말고 Link를 사용하자 현재 듣고 있는 애플코딩의 강좌에서 a태그를 사용하는 것보다 Link를 사용하는 것이 더 부드럽게 페이지 전환이 된다고 한다 [React] Link와 태그의 href의 차이 리액트에서 페이지를 이동할 때는 태그의 href 대신 Link를 사용해야 한다. 이유 태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다. 리액트는 단일 url을 가지고 SPA(Single Page Application)으로 사 gomgomkim.tistory.com 위의 블로그에 따르면 a 태그를 사용하여 페이지를 불러오면 이전의 페이지를 날리고 새로 불러와야 해서 리액트와 Next js의 경우 속도 저하가 발생할 수 있다 그래서 이전의 페이지를 날리지 않는 Link를 사용해야하는 것이다 (웬만하면 Link를 사용하는게 좋을.. 2023. 11. 13. 이전 1 2 다음
