[Next] 섹션2 본격 클론 시작 (작성 중)

본격 클론 시작

active link

링크와 연결된다.

1. 내가 어디에 있는지? -> client 컴포넌트에서 할 수 있다.
2. 폴더는 _component -> NavMenu.tsx

"use client";

import { useSelectedLayoutSegment, useSelectedLayoutSegments } from "next/navigation";

const segment = useSelectedLayoutSegment(); // 레이아웃 기준 폴더들만 'compose'
const segments = useSelectedLayoutSegments(); // 하위 폴더들 까지 모두 ['compose', 'tweet']

client component 는 언제 사용?

컴포넌트에 use~ hook이나 onclick이벤트같은거 있다면 클라컴포넌트라고 생각하자

context api 로 홈탭 만들어보기

강좌에서는 주스탠드나 리액트 쿼리 등 다양하게 보여주지만 한가지만 선택해서 잘 사용하면 좋다.
일단 context api로 시작해보자!

1. Post.tsx 같은 애들은 공통적으로 많이 사용할 것 같으니 공통으로 빼주자!

2. TabProvider.tsx 생성

// TabProvide.tsx

export const TabContext = createContext ({
	tab: 'rec',
	setTab: (value: "rec" | "fol") => {}
})

type Props = { children: ReactNode };

export default function TabProvider({ children }: Props) {
	const [tab, setTab] = useState('rec');

	return (
		<TabContext.Provider value={{ tab, setTab }}>
			{children}
		</TabContext.Provider>
	)
}

// 사용할 곳에 가서..
...
return (
	<TabProvider>
		<Tab /> {/* 이렇게 알아서 잘 묶어준다. 그러면 Provider이하는 모두 context api를 유지한다. */}
	</TabProvider>
)

PostForm 만들기!

폼은 왠만하면 클라이언트 컴포넌트라고 생각한다.
왜? 이벤트가 많으니까

/compose/tweet 만들기

tweet 모달 띄우기

게시하기 버튼을 누르면 포스트 입력창이 뜨고 새로고침을 해도 뒤에 홈이 보이는 채로 떠있는 상태여야 함.

1. @modal 만들고, default.tsx 잊지말고 작성한다.
   1. /componse/tweet 경로의 모달을 만든다면
   2. 내부 폴더 생성를 생성한다.
      1. /componse/tweet/page.tsx 얘가 모달임.
2. 같은 수준의 layout.tsx에서 {modal} props로 마련해준다.
3. 여기서 (.) 를 사용하여 인터셉팅 라우트로 생성해준다면 <Link href="/compose/tweet"> 의 이동은 모두 인터셉팅 라우트 된 곳으로!

usePathname() 과 /explore 페이지

• usePathname

  • / 부터 ?앞까지 pathname
    • ? 뒤는 searchParams
  • Client component에서 사용할 수 있다.

• /explore 경로에서는 <TrendSection>이 없어야함.

  • 경로를 탐지해서 null을 반환해주면 됨.
    • 경로를 탐지하는 hook은 여러개가 있다. (당연히 hook은 client component에서)
    • usePathname() : / 여기부터 ? 전까지 보여줌 /explore
    • useSelectedLayoutSegment() : 경로 이름 보여줌 explore

const pathname = usePathname();
if (pathname === "/explore") return null;

// 혹은

const segment = useSelectedLayoutSegment();
if (segment === "explore") return null;

useSearchParams()와 프로필, /search 페이지

주소창에 정보를 넣는것이 searchParams이다.

useRouter, useSearchParams

탭을 누르면 searchParams도 바뀌어야 한다.

searchParam을 가져오는 두 가지 방법

1. Search 컴포넌트에서 searchParams props를 통해 원하는 곳에 넘겨준다.
   

2. 아니면 client component로 만들고 searchParams 훅을 사용한다.
   

클릭 시 이동

• router.replace()

쿼리스트링 설정하기
`/search?q=what 인 경우에

• searchParams.get(‘q’) // what
  • 쿼리 스트링 뒤 문자를 반환
• searchParams.toString() // q=what
  • searchParams 전체를 반환
    

클라이언트 컴포넌트에서 서버 컴포넌트를 감싸는건 괜찮다.

개별 Post를 누르면 해당 페이지로 이동해야하는데,
전체를 모두 클라컴포넌트로 바꾸기 애매한 경우
서버 컴포넌트를 children 혹은 props 넘긴다.

주의

• 클라 컴포넌트에서 서버 컴포넌트를 import 하면 안 된다.
  • 서버 컴포넌트가 클라이언트 컴포넌트로 성격이 바뀐다.
• 서버 컴포넌트가 클라의 자식일 경우, 반드시 서버 컴포넌트를 children이나 props로 넘겨야 한다.
  

onClickCapture

알고 계셨슴까?
활용 잘 하십시오.

Faker.js

npm i @faker-js/faker
더미 데이터 넣어주는 라이브러리

---

/message

다른 DB 테이블과 합치는건 대문자로 작성한다.

(혹시 틀린 정보가 있다면 댓글로 알려주세요!)

• 이 글은 옵시디언에서 작성되었습니다.