분류 전체보기97 [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] key 속성을 왜 넣어줘야 하지? Next는 React를 기반으로 만들어졌으니 React의 특징을 많이 가진다. React의 특성인 가상 돔을 이용하여 특정 부분만 다시 그려주는 특성은 비슷한 돔이 반복적으로 나타났을 때 (map을 사용하는 경우) 다른 점을 찾기 위해 순차적으로 돔을 확인한다. 이는 속도 저하와 이어질 수 있기 때문에 각 돔의 key 값을 줘 찾을 수 있도록 한다. React에서도 권장하는 사항임. export default function List() { let products = ["Tomatoes", "Pasta", "Coconut", 'Apple']; return ( 상품목록 {products.map((item, i) => { return ( // index를 key 값으로 넣는 경우가 많다. {item} 이것은.. 2023. 11. 13. 이전 1 2 3 4 ··· 25 다음
