Next.js/코딩애플

글 삭제 기능

해갈 2023. 9. 17. 22:27

삭제버튼 누르면 애니메이션

삭제버튼 누르면 박스를 서서히 사라지게 만드려고 합니다.

그런 기능은 client component 안에서만 작성할 수 있으니 client component 를 만들어서 코드짜면 되겠습니다.

하지만, 지금 있는 /list/page.js 파일을 전부 client component 로 바꿔버리는 것보다 JS 기능이 필요한 일부분만 client component 로 바꾸는 것이 낫다고 생각했습니다.

/list/ListItem.js

'use client'

export default function ListItem() {
  return (
    <div>
      { result.map((a,i)=>
          <div className="list-item" key={i}>
            <Link href={'/detail/' + result[i]._id}>{result[i].title}</Link>
            <Link href={'/edit/' + result[i]._id} className="list-btn">✏️</Link>
            <p>1월 1일</p>
          </div>
       ) }
    </div>
  )
}

근처에 client copmonent 파일 하나 만들어서 글 목록 UI를 옮겼습니다.

 

/list/page.js

import ListItem from './ListItem.js'

export default async function List() {
  return (
    <div className="list-bg">
      <ListItem/>
    </div>
  )
}

그리고 컴포넌트를 /list 페이지 안에 넣어주었습니다.

하지만, "ListItem 컴포넌트 안에 result 가 정의되지 않았습니다" 라는 에러가 발생했습니다. 해결책은 2가지가 있습니다.

  1. List 컴포넌트 안에 있던 result 변수를 ListItem 까지 props 로 전송하거나
  2. ListItem 컴포넌트에서 DB데이터를 가져옵니다.

1번은 할 수 있으니 2번을 시도해보았습니다.

 

 

client component 에서 DB데이터 가져오려면!

'use client'

export default function ListItem(){
  useEffect(()=>{
    let result = (서버에 요청해서 DB데이터 가져오는 코드)
  },[])

  return (
    <div>{result}</div>
  )
}

client component 에 적은 코드는 유저들이 볼 수 있어서 DB와 직접 통신하는 코드는 적으면 안됩니다.

그래서 위처럼 코드를 작성하면, DB데이터를 가져와서 html 에 보여줄 수 있습니다.

  • 변수보다는 state 를 사용하는 것이 좋습니다.
  • useEffect 는 쓸데없는 코드를 보관하는 곳이고, 보통 서버로 데이터 요청하는 코드도 이 곳에 적습니다.

그런데 단점이 있습니다.

  • 페이지 로드 시 유저가 텅 빈 html 을 먼저 보게 되고, 시간이 지나야 html 내용이 채워진다는 겁니다. 이유는 useEffect 안의 코드는 html 이 다 로드된 후에 실행되어서 그렇습니다.

일반 유저들에게는 상관없는데, 검색엔진 봇들이 페이지를 수집하려고 방문하면 텅 빈 html 을 발견하고, 실망하고 돌아갈 수 있기 때문에 검색엔진 노출 측면에서 단점이 있을 수 있습니다.(실은 결국 수집은 하긴 하는데, 다른 사이트보다 수집시간이 좀 느립니다.)

그래서 검색노출이 중요한 페이지를 만들 때는 client component 로 만들어서 그 곳에서 서버데이터를 가져오는 건 피하는 것이 좋습니다.

 

그래서 SEO(검색 엔진 최적화)가 중요하다면, Client component 에서 DB 데이터를 가져오지 말고, 부모 server component 에서 DB데이터를 가져온 다음 client component 로 props 전송하면 됩니다.

Nextjs 에선 server / client component 들을 보여줘야 할 때 최대한 서버에서 미리 html 을 만들어서 보내려고 하기 때문에 이렇게 하면, client component 도 DB 데이터를 미리 채워서 유저에게 보내줍니다.

 

 

Ajax 사용해도 서버로 요청가능

<form>태그 쓰면 서버로 GET, POST 요청이 가능하댔는데, fetch() 라는 함수를 사용해도 서버로 GET, POST, PUT, DELETE 요청이 가능합니다. 이걸 ajax 라고 부릅니다.

  • 장점은 <form> 사용시 요청보내면 항상 새로고침이 되는데, ajax 는 새로고침 없이 요청을 보낼 수 있습니다.
<button onClick={()=>{
  fetch('/URL')
}}>🗑️</button>

fetch()를 실행하면 /URL 경로로 GET 요청이 갑니다.

 

<button onClick={()=>{
  fetch('/URL').then(()=>{
    console.log('완료')
  })
}}>🗑️</button>

요청완료시 (서버응답시) 특정 코드를 실행하고 싶으면, .then(( ) => { }) 붙여서 그 안에 적도록 합니다.

 

<button onClick={()=>{
  fetch('/URL', { method : 'POST', body : '안녕' })
}}>🗑️</button>

요청시 서버로 데이터도 전송하고 싶다면, body : 항목에 넣으면 됩니다.