혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다

오늘 한 일

• header, footer, filter 마크업
• interface 파일 관리(아직 더 찾아봐야함)

오늘 총평

고민이 많았던 날이다. 타입스크립트 기초도 잘 모르는데 마크업작업을 하니까 에러가 여기저기서 발생하고, 게다가 너무 사소한 고민들. filter의 태그를 ul+li 방식으로 할 것인가 아니면 div 조합으로 갈건지, button으로 갈건지.. <selection> 을 사용안할 때 보통 어떻게 사용하는지 찾아보는데 요즘 쇼핑몰에서는 토글형식으로 주로 사용하고 심지어 안보여주는 곳도 있었다. 이름 정하는데 filter, sort, align 등 구글링 해도 잘 안나와서 뭐로 정할지 확신이 들지 않아서 시간이 많이 흘렀다.. 게다가 footer에서 의외로 시간을 많이 썼다. 객체를 반복문으로 어떻게 해야할지, 중요하지도 않은 부분에서 함수화하려고 변수 형태? 인터페이스 형태?엄청 복잡했다. 우선 하드코딩으로 올려놓고 머리가 안돌아가서 다른 작업하고 마져해야겠다... 어제 개발일지 쓰다가 5시 넘게 잔게 문제인건가 오히려 졸리다는 생각은 안드는데 멍하다 🫥

궁금한 점

작업하다가 아래의 코드를 작성했는데.. 이부분도 변수로 처리해야할지 궁금해졌다. 객체를 만들어서 map 함수를 돌리는 방법으로 하는게 더 깔끔할지 아니면 하드코딩으로 작업하는게 더 나을지 의문이다.

{!isLogin ? (
          <>
            <StyledLink to="/login">Login</StyledLink>
            <StyledLink to="/signup">Sign up</StyledLink>
            <StyledLink to="/login">새 레시피 등록</StyledLink>
          </>
        ) : (
          <>
            <StyledLink to="/">Logout</StyledLink>
            <StyledLink to="/mypage">Mypage</StyledLink>
            <StyledLink to="/write">새 레시피 등록</StyledLink>
          </>
        )}

---

<Link> 스타일 적용과 상속

react-router-dom에서의 <Link> 컴포넌트도 styled를 적용할 수 있었다. pull-requests 코드 보다가 하나 배웠다.

상속으로 styled-components의 CSS 적용 가능

<Link> 도 컴포넌트이므로 상속 받아서 CSS를 입힐 수 있다. 자체로 스타일을 적용할 수 있는지 모르고 지금까지는 하위 태그를 넣거나 아이콘을 사용하면 그 부분에 CSS를 적용했는데 상속 방식으로 쓸 수 있다.

import { Link } from "react-router-dom";

const CustomLink = styled(Link)`
	/* CSS 생략 */
`;

// styled(상속할_컴포넌트)`CSS적용`
// -> 따옴표 X, 백틱 O

커스텀, 재사용 가능한 <Link> 컴포넌트

// <ul> 하위로 추가할 것이라 <li> 태그 사용
// SLink, SLi는 styled-components로 스타일링 한 컴포넌트

const StyledLink = ({ to, children }: LinkProps) => { //----> 아래 타입선언 참고
  return (
    <SLi>
      <SLink to={to}>{children}</SLink>
    </SLi>
  );
};

export default StyledLink;

// 사용 방법
<StyledLink to="">recipe</StyledLink>

typescript로 props 타입 선언

커스텀한 <Link> 컴포넌트의 재사용을 위해 props를 적용
-> typescript로 작업하는 경우 props 타입 명시

// props 있는경우 interface 키워드로 객체 타입 선언
interface LinkProps {
  to: string;
  children: string;
}