use client 에러

안녕하세요, next.js강의

좋아요 버튼 만들기 (useState, onClick)에서 
그전까지 문제 없다가 코드 상단에 'use client'를 추가하면 
Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
이런 오류가 나옵니다. 
구글에 찾아보니 div로 감싸면 된다고 해서 여기저기 감싸보니 
Unhandled Runtime Error
SyntaxError: "undefined" is not valid JSON
JSON 쓴 적 없는데 이런 오류가 나옵니다...
아래는 오류가 난 코드입니다. 도와주세요 ㅠㅠㅠ(폭풍눈물흘리며)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
list/page.js파일
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

'use client'

export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut']
  return (
    <div>
      <h4 className="title">상품목록</h4>
      { 상품.map((a,i)=>{
        return (
          <div className="food" key={i}>
            < img src={`/food${i}.png`} className="food-img"/>
            <h4>{a} $40</h4>
            <span> 1 </span>
            <button >+</button>
          </div>
        )
      }) }
    </div>
  )
}