Next13) 서버컴포넌트 활용

1. 클라이언트 컴포넌트

//Skill.tsx

'use client'

interface SkillLoaderProps {
  children: React.ReactNode
}

const Skill = ({children}: SkillLoaderProps) => {
  const [skillModal, setSkillModal] = useState(false);

  const toggleModal = () => {
    setSkillModal(!skillModal);
  }

  return (
    <>
      <div onClick={toggleModal} className="folder">
        <Image src={folder} width={48} height={48} alt='folder-icon' priority />
        <p>Skills</p>
      </div>
      {skillModal && (
        <div className='modal'>
        ...
          <div onClick={toggleModal} className='close-modal'>
            <Image src={close} width={12} height={12} alt='close-button' />
          </div>
          {children}
           ...

모달을 사용하기 위해서 onClick기능이 필요했기 때문에 서버와 클라이언트 컴포넌트로 나누었다. 먼저 클라이언트 컴포넌트에서 서버의 데이터를 표시할 부분에서 서버컴포넌트를 children으로 받아준다.

2. 서버 컴포넌트

//SkillItems.tsx

const SkillItems = async () => {
  const skillsResponse = await fetch("api url");

  const skillsJson = await skillsResponse.json();

  return (
    <div className="modal-content modal-skill">
      {skillsJson.map((skill: skillProps) => (
        <div key={skill.id} className="folder">
          <Image src={skill.img} width={43} height={43} alt={skill.title} />
          {skill.title}
        </div>
      ))}
    </div>
  )
}

서버 컴포넌트에서 데이터를 불러온다. 온전히 데이터만 반환할수도 있겠지만 나는 CSS-in-JS라이브러리를 사용하지 않았기 때문에 서버 컴포넌트에서 모달 콘텐츠를 완성시킬수 있었다.

3. 부모 컴포넌트

//page.tsx

    <main className={styles.main}>
      <Skill>
        <SkillItems />
      </Skill>
    </main>

부모 컴포넌트에서 클라이언트가 데이터로더의 역할을 하면서 서버컴포넌트를 감싸는 형태가 된다. 서버컴포넌트를 클라이언트에서 사용할수 없기 때문에 이렇게 부모를 통하는 방법이 있다. 정적 데이터의 경우, 최대한 훅을 쓰지 않고 서버컴포넌트만 사용하거나 클라이언트 컴포넌트에서 useEffect로 똑같이 데이터를 받는 방법도 있으니 데이터와 코드 구조에 따라 적절히 판단하여 사용하면 되겠다.

참고
Server components in next13 with examples