이 페이지에는 Carrot market UI Cloning에 대한 노트 이다.
무엇보다 Tailwind 사용으로 인하여 코드의 가독성이 떨어짐으로 가독성 관리에 대한 내용, layout(어떠한 페이지에도 항상 나오게될 ex) tab bar, 뒤로가기 버튼 등) page 만드는 방법 그리고 css 스타일링에 있어 알아두면 좋을 점들에 대한 내용들을 적어 놓았다.
주요 노트
1. useState 2개 이상의 초기값 설정 방법.
pages/enter.tsx
const [method, setMethod] = useState<"email" | "phone">("email");
// email 또는 phone 이라는 string 변수를 버튼을 눌렀을때 toggle되도록 넣기 위한 코드이며, 초기 값은 email로 정함.2. email과 phone 요소에 이벤트성 스타일 주는 방법
pages/enter.tsx
function cls(...classnames: string[]) {
// 무한 으로 인자를 받기위해 ...function을 사용 하였으며(이 코드에선 2개의 인자), 타입은 문자열 배열로 지정.
return classnames.join(" ");
} // return시 모든 String 배열들 사이에 한칸의 공백을 추가해 리턴.
className={cls(
"pb-4 font-medium text-sm border-b-2",
method === "email"
? " border-orange-500 text-orange-400"
: "border-transparent hover:text-gray-400 text-gray-500"
)}
//스타일 조건을 위한 삼항연사자와 일반 스타일 속성들이 함께 적용되야 하기 때문에, 이 코드의 가독성이 줄어 들게 된다.
그러므로 cls 라는 function 을 만들어 위의 코드와 같이 조금 더 깔끔한 코드로 바꿀수 있다.
하드 코딩 시에는 ${} 과 `` 같은 EL들의 중복하게 되어 가독성이 떨어진다.3. Title , Tab bar , go back UI 적용 방법
components/layout.tsx
import React from "react";
import { cls } from "../libs/utils";
// 자주 쓰이기에 libs/utils 에 넣어 두었다.
interface LayoutProps {
title?: string;
canGoBack?: boolean;
hasTabBar?: boolean;
children: React.ReactNode;
}
//여기서 React.ReactNode는 jsx 내에서 사용할수 있는 모든 요소의 타입을 의미 한다.
export default function Layout({
title,
canGoBack,
hasTabBar,
children,
}: LayoutProps) {
// typescript에서 interface에 지정한 변수의 타입들을 선언할때 이와 같은 방식으로 선언한다.
return (
<div>
<div className="bg-white w-full text-lg font-medium py-3 fixed text-gray-800 border-b top-0 justify-center flex items-center">
{title ? <span>{title}</span> : null}
</div>
<div className={cls("pt-16", hasTabBar ? "pb-16" : "")}>{children}</div>
{hasTabBar ? (
<nav className="bg-white text-gray-800 border-t fixed bottom-0 pb-10 pt-3 flex justify-between items-center"></nav>
) : null}
</div>
);
}위의 코드에서, children을 중심으로 위쪽엔 title 아래쪽엔 tab bar 가 화면에 뿌려지게 된다.
4. Layout component 사용 방법
import Layout from "../components/layout";
<Layout title="홈" hasTabBar>
... //요소들
</Layout>위의 코드는, 다른 파일에서 Layout 컴포넌트로 감싸 title, hasTabBar, canGoBack 과 같은 props 를 사용 하여 title, 하단 Tab bar, goback UI를 어느 페이지에서나 선택적으로 보여줄수 있다.
Tailwind plugin : 강의에서는 input layer를 변경 할수있는 plugin을 사용하였다.
설치 커맨드 : npm i @tailwindcss/forms
설치후 configration 적용
tailwind.config.js
plugins: [require("@tailwindcss/forms")],주요 Tailwind 또는 CSS 스타일 속성들.
- rounded-(위치)-(크기) : 특정 모서리만 둥굴게 변경을 원할때.
- select-none : 유저가 특정 요소를 선택하지 못하게 하고싶을때.
- flex items-end :일반적인 댓글이나 좋아요의 위치 같이 아래쪽에 위치 하고싶을때.
- divide-(y or x)-(s) : 형제 요소가 있는 곳에만, boder를 넣어줌.
- flex-row-reverse space-x-reverse : 아이템을 반대로 돌려 정렬해줌(ex-채팅창에서의 대화 UI).
- aspect-(특정 도형) : 비율에 맞춰 스타일링 해줌. ex) 정사각형, 원, 비디오 등..
- w-full max-w-xl mx-auto : 최대의 크기 이지만. max width는 xl 크기까지이며 x축의 길이는 자동으로 맞춘다는 의미.
- htmlFor="이름" : htmlFor은 label이 포함한 태그에 관계성을 주어 하나의 태그 처럼 이벤트가 가능하게 하는것. 그러므로, label의 속한 태그에 같은 "이름"으로 주어야 한다. JSX 에서는 for이 아닌 htmlFor을 사용한다.
이외 알아두어야 할것들.
- tailwind에서 특정 value 값을 지정할수 없을때 divide-y-[1px]와같이 arbitrary value를 []로 감싸 tailwind에 지정되어 있지 않은 값도 넣을수 있다.
- heroicons : svg 아이콘들을 무료로 사용할수 있는 웹사이트.
- 노마드 코더 같은 경우 css의 모든글자의 색을 완전 검은색으로 하지않는 특징이 있으며, 한 컴포넌트 단위의 div 구조를 지향하는것 같다.
React js 개발자