2023.11.20 (월) TIL

지정한 url 외에 들어오는 주소를 Home(지정한 url)으로 보내는 방법

• Home 컴포넌트로 Redirect

Router.jsx

<BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="detail" element={<Detail />} />
        <Route path="*" element={<Navigate replace to='/' />} />
      </Routes>
    </BrowserRouter>

• Navigate to='/' 를 사용하여 지정한 url 외의 url이 들어오면 '/' redirect 한다
• replace를 붙혀준다면
  예) 현재 detail 페이지 -> 지정되있지 않은 url 입력(info) -> redirect를 통해 지정되지 않은 url을 home으로 바꿔준다 ->이를 통해 현재 페이지에서 뒤로가기를 누르면 다시 detail 페이지로 전환
• 만약 replace가 아니라면?
  예) detail -> info -> home : 뒤로가기 클릭시 home->info로 이동, 하지만 지정된 path에 의해 다시 home으로 이동으로 인해 무한루프에 빠진다

<Tab $activeMember={activeMember}>카리나</Tab>
      <Tab $activeMember={activeMember}>윈터</Tab>
      <Tab $activeMember={activeMember}>닝닝</Tab>
      <Tab $activeMember={activeMember}>지젤</Tab>

스타일 컴포넌트를 camel 기법으로 작성시 $를 앞에 붙혀야 내부적으로 문제가 생기지 않는다.

useContext

1.context를 관리할 폴더와 .jsx파일을 만든다.
2. .jsx 파일에 createContext 훅을 통해 contetxt를 만들고, 관리할 state를 생성한다.
3-1)

export const letterContext=createContext(null);
하고
사용할 컴포넌트에서
<letterContext.Provider value={넘겨줄 state혹은,value 값} 로 감싸 , 하위 컴포넌트들에게 값을 넘겨다

3-2)

export const letterContext=createContext(null);
function LetterContextProvider({children}){
 const [letters,setLetters] = useState(dummy data);
  return <LetterContext.Provider value={{letters,setLetters}}>
    {Children}
</LetterContext.Provider value>
  
}