[React] 미니 블로그 프로젝트 TIL

wonyu·2022년 6월 2일
0

react-router-dom

Index Route

  • path가 없는 Route. 부모 URL에 있는 부모 outlet에서 렌더 됨
    • Outlet?
      • 부모 route 요소에서 자식 route 요소를 렌더하기 위해 사용 → outlet을 사용하여 중첩 라우팅이 가능
      • 단어를 풀어서 보면 out하는 것을 let한다는 뜻이다. 보통 상위 요소가 하위 요소를 let 하니까, 경로가 일치할 때 하위 route가 보여지는 것을 let하는 것으로 이해했다.
  • 예시
    function App() {
      return (
        <BrowserRouter>
          <MainTitleText>wonyuuu의 미니 블로그</MainTitleText>
          <Routes>
    				{/* here */}
            <Route index element={<MainPage />} />
            <Route path="post-write" element={<PostWritePage />} />
            <Route path="post/:postId" element={<PostViewPage />} />
          </Routes>
        </BrowserRouter>
      );
    }

useParams

  • 파라미터의 값은 string 임을 주의!
    const { postId } = useParams();
    // item.id는 number지만 postId는 string이므로 타입 변환 or 타입 제외하고 비교
    const post = data.find(item => item.id === Number(postId));

styled-components

마지막 요소를 제외한 리스트 요소 스타일링하기

import styled from 'styled-components';

const Wrapper = styled.div`
  ...
  /* 이렇게! */
  & > * {
    :not(:last-child) {
      margin-bottom: 1rem;
    }
  }
`;
  • & > * : Wrapper의 모든 자식 요소들 중, last child가 아닌 것에 대해 스타일링 한다.
  • & in styled-components
    • 해당 컴포넌트의 모든 인스턴스를 나타낸다.
    • 현재 컴포넌트에 대해 동등한 위치에 스타일을 추가할 때만 사용하는 줄 알았는데, 해당 컴포넌트를 참조하는 것이므로 다양한 용도로 사용 가능하다.
    • 예시
      const Thing = styled.div`
        & ~ & {
          background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
        }
      
        & + & {
          background: lime; // <Thing> next to <Thing>
        }
      
        .something-else & {
          border: 1px solid; // <Thing> inside another element labeled ".something-else"
        }
      `
    • 참고: https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

0개의 댓글