클라이언트 컴포넌트(2)
-
Next.js 13 - 12. 글생성
글 생성 이번에는 create 기능을 구현해보자. 이를 위해 create 폴더 내의 page.tsx 파일을 수정하면 된다. 중첩된 레이아웃을 설명하기 위해 이전에 만든 인위적인 layout.tsx 파일도 있는데 이건 이제 필요없어서 layout.tsx를 지워주고 page.tsx로 다시 시작하자. 만약 에러가 뜨면 일단 개발 서버를 껐다가 다시 켜보고 새로고침 해도 에러가 여전히 뜨면 .next를 지우고 다시 실행해보면 된다. 생성 기능을 위해 form을 만들어주자. 사용자가 어떤 값을 입력하고 create를 클릭했을 때 이벤트를 잡기 위해서는 form에 onSubmit 이 필요하다. 이건 사용자가 상호작용할 때 실행되는데 사용자와 상호작용하는 것은 서버 컴포넌트에서 다루지 않는다. 에러가 발생하게 되고,..
2023.08.31 -
Next.js 13 - 10. 글목록 가져오기
Server Componet VS Client Component Next.js에서는 Server Component, Client Component라는 개념이 구분되어 있다. React 18 버전부터 서버 컴포넌트라는 개념이 추가가 되면서 Next.js가 그걸 가져와서 구분되어 진 것이다. 서버 컴포넌트를 안 써봤다면 지금까지 클라이언트 컴포넌트 방식으로 구현해왔을 것이다. 그리고 클라이언트 컴포넌트에서는 useState, useEffect, onClick, onChange와 같은 것들을 사용할 수 있는데 서버 컴포넌트에서 이런 것들을 사용하게 되면 에러가 발생하게 된다. 두 컴포넌트는 사용할 수 있는 api가 다르다는 것을 기억하면 좋다. 그리고 Next.js에서는 특별한 조치를 취하지 않는다면 서버 컴..
2023.08.31