8/16 TIL

1. 사이드바 구현

• 목표: React 애플리케이션에 사이드바를 추가하여 사용자 내비게이션을 개선.
• 방법:
  • 사이드바 컴포넌트를 생성하고, 필요한 링크 및 스타일을 추가.
  • useState를 사용하여 사이드바의 열림/닫힘 상태 관리.

const Sidebar = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className={`sidebar ${isOpen ? 'open' : ''}`}>
      <button onClick={toggleSidebar}>Toggle</button>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </nav>
    </div>
  );
};

2. 문제 발생

• 사이드바를 구현한 후, 다른 컴포넌트에서 useContext를 사용하여 데이터를 가져오는 과정에서 오류 발생.
• 에러 메시지:
  • "React Hook 'useState' is called conditionally."
  • "Type '{}' is missing the following properties from type 'CardSubTitleProps': text, lineClamp."

3. 트러블슈팅 과정

1. React Hooks 호출 문제

   • useContext를 통해 context가 없을 경우 null을 반환하는 로직이 있어 Hooks가 조건부로 호출됨.
   • 해결 방법: Hooks를 조건문 외부에 위치시켜 항상 호출하도록 수정.

   const CardTitle = () => {
     const context = useContext(ImageContext);
     const [isLoading, setIsLoading] = useState(true);
     const [lineClamp, setLineClamp] = useState<string>("line-clamp-3");
   
     const { title = "", subtitle = "" } = context || {};
   
     useEffect(() => {
       // ...
     }, [title]);
   
     if (!context) {
       return null;
     }
   };

2. 타입 오류 문제

   • CardSubTitle 컴포넌트에 필요한 props인 text와 lineClamp를 전달하지 않아 발생.
   • 해결 방법: SmCard에서 CardSubTitle에 필수 props를 전달.

   <CardSubTitle text={subtitle} lineClamp="line-clamp-3" />

4. 결론

• 사이드바 구현 시 React Hooks 사용 시 주의사항을 배웠음.
• Hooks는 조건부로 호출하지 않도록 하고, 컴포넌트에 필요한 props는 명시적으로 전달해야 함.
• 이러한 문제를 해결하면서 React의 규칙과 타입 시스템에 대한 이해가 깊어짐.