React에서 부모에서 자식 간에 값을 넘기는 방법에 대해 정리해보았다.부모에서 자식으로 값 전달부모에서 Props를 이용해서 Child 컴포넌트에 전달한다.⭐ props를 이용한다.props란, properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다.(자식이 props를 통해 부모에게 데이터를 줄 수 없다는 뜻)자식이 부모로부터 받아온 값을 사용할 때 방식1번객체 비 구조화를 사용하여 props를 선언한다. 이 경우, Child 컴포넌트는 **user**라는 속성을 직접 사용할 수 있다. 이 방식은 코드를 간결하게 유지하고 가독성을 높일 수 있다. 2번2번 방식은 **props**라는 객체를 통해 모..

Next.js는 리액트 프레임워크로 프리랜더링을 지원하여 SEO 최적화와 성능 개선을 위해 HTML을 먼저 생성한다. 그래서 window를 참조하는 이벤트를 사용하면 에러가 발생 할 수 있다.window 참조 오류 해결 법typeof 연산자 : window 객체가 존재하는 지 판단 하는 방법클라이언트에서 렌더링 할 때까지 기다렸다가, window를 참조할 수 있는 시점에 코드 실행if (typeof window !== "undefined") { // window 객체를 사용하는 코드}// 블로그에서 사용된 코드const [scrennWidth, setScrennWidth] = useState( typeof window !== "undefined" ? window.innerWidth : 0 ); ne..

이번에는 이전 스크롤 위치를 기억하면서 모달 창이 보이면 body 스크롤을 방지하는 방법에 대해 알아 보았다. 모달 창을 여는 index.tsx 로 close를 넘긴다.//index.tsxexport default function Home() { const [modal, setModal] = useState(false); const showModal = () => { setModal(true); }; const close = (x: any) => { setModal(x); }; return ( {[1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13].map((x) => ( ..