Next.js로 웹서비스 만들기 4주차 - 게시판 만들기 (Dynamic Routes, 페이지 이동, MongoDB 데이터 수정)
·
Next.js
게시물 상세페이지 만들기 게시판 DB에 글 데이터를 몇 개 집어넣고 리스트를 조회하는거까지 해봤으니, 이제 특정 게시물을 눌렀을 때 해당 게시물의 상세페이지로 넘어가는 기능을 구현할 차례이다. Dynamic Route 현재 게시물 리스트는 /list에서 조회하고 있고, 게시물을 선택하면 그 게시물의 id 값에 따라 /detail/1, detail/2, detail/3 이런식으로 url이 바뀌면서 그 내용을 보여주면 된다. 1. 다음과 같이 detail 폴더를 만들고, 그 안에 [id]라는 폴더를 또 만든다. [폴더명] -> 폴더 생성 시 이렇게 대괄호로 감싸게 되면, 이 부분에 어떤 내용이 와도 상관없다는 의미가 된다. 따라서 /detail/123, /detail/ㅇ 이렇게 입력해도 /detail/[id..
Next.js로 웹서비스 만들기 3주차 - Next.js에서 MongoDB 사용하기
·
Next.js
State의 변경 ✅ state를 변경시키려면 스프레드 연산자를 사용하여 값을 복사한 후, 복사본의 값을 변경시켜야 한다. 이는 리액트의 불변성과 관련있는데, 리액트는 기존 state와 새 state의 값을 비교하여 다를 경우에만 상태 변화를 감지한다. 불변성을 지켜줌으로써 효율적인 상태 업데이트를 하는 것이다. 때문에 상태를 직접 수정하기보다 복사본을 만들고 이 값을 변경해주는 것이 바람직한데, 여기서 또 주의할 점이 있다.let [ count, setCount ] = useState(0); let newCount = state # -> (x) let newCount = [...count] # -> (o)위 예시 코드의 세 번째 줄과 같이 작성할 경우, 데이터의 값을 복사하는 것이 아니라 값의 주소를 ..
해안해
'MongoDB' 태그의 글 목록