특정 아이콘을 클릭해서 dialog가 뜨게 하려고 했어서 onClick으로 이벤트를 줘서 거기에 dialog 컴포넌트를 호출하게 하면 되겠다! 했던 나의 잘못된 생각... 일단 동작부터도 안되는 이슈! const handleDialog = () => { return( { setVisible(false); }} > ) }; 이벤트 핸들러는사용자의 상호작용에 반응하여 어떤 "동작"을 수행하기 위한 것이다. React 컴포넌트는 UI를 정의하는 것이지, 이벤트 핸들러의 반환값으로 사용되어서는 안 된다!즉, dialog 혹은 modal 같은 경우 상태로 관리해서 조건부 렌더링으로 설정해줘야 하는 것이다.. const App(){ const [visible,s..

next.js 13버전은 페이지 단위로 렌더링 방식을 규정하지 않고 컴포넌트 단위인 서버 컴포넌트, 클라이언트 컴포넌트로 렌더링을 한다.  📌 server 컴포넌트app 폴더 안에 있는 컴포넌트들이 대부분 서버 컴포넌트이다!server 컴포넌트 코드는 서버에서 실행되고 클라이언트에는 코드의 결과만을 제공한다.따라서 console log 자체도 브라우저가 아닌 서버 터미널에서 실행된다. 클라이언트로 js 코드를 보내지 않기에 클라이언트 측에서 부하도 없고 웹사이트의 로딩 시간을 줄일 수 있는 장점이 있다. When?  언제 사용하는가? 데이터 패칭이 필요한 컴포넌트: 서버에서 데이터를 가져오고, 클라이언트에 그 데이터를 렌더링할 때.상태나 이벤트 처리가 필요하지 않은 UI: 예를 들어, 정적인 콘텐츠나 ..