Pages 일종의 라우터를 쉽게 만들어놓은 것 파일명이 url임 컴포넌트 이름은 상관없음 파일명에 따라 작동한다. 예외 index 일반적인 home인 페이지 특징 컴포넌트가 react는 기능을 하는데, import react 할 필요가 없다 Static Pre Rendering 클라이언트 사이드 렌더링 - 클라이언트에서 자바스크립트 실행해서 화면에서 html을 만들면서 보여준다. (CSR) -> 하나씩 점점 생겨남 (hydration - 프론트 안에서 실행) , js 없이 아무것도 보여줄 수없다 서버사이드 렌더링 - 서버에서 자바스크립트 실행해서 실행된 html을 완성되면 보여준다. (SSR) -> 다 만들고 한꺼번에 생겨남 , js 없이 기본 html 화면을 보여준다. 그리고 js가 렌더링되면서 실행되..

ex) modal 창 const [closeModal, setCloseModal] = useState(false) useEffect(()=>{ if(closeModal ) window.addEventListener("click", handleClickOutside) window.addEventListener("click", ()=> setCloseModal(true)) },[closeModal]) 처음에 조건문으로 막고, 그다음 사용하도록 바꿈

const [open, setOpen ] =useState(true) const openHanddler = () =>{ setOpen(!open) } openHanddler()} className="w-6 h-6 text-color-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> { open || { 바부 ) } }

focus:ring-0