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>
);
}
const { postId } = useParams();
// item.id는 number지만 postId는 string이므로 타입 변환 or 타입 제외하고 비교
const post = data.find(item => item.id === Number(postId));
import styled from 'styled-components';
const Wrapper = styled.div`
...
/* 이렇게! */
& > * {
:not(:last-child) {
margin-bottom: 1rem;
}
}
`;
& > *
: Wrapper의 모든 자식 요소들 중, last child가 아닌 것에 대해 스타일링 한다.&
in styled-componentsconst 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"
}
`