a href를하면 페이지가 새로고침되어 사용하지 않을 거라고 하시는 n선생님 => 대신 react router dom을 통해 link component 사용 because link won't refresh the page
link 는 to 속성이 필요함.
const Coin = styled.li`
background-color: white;
color: ${(props) => props.theme.bgColor};
border-radius: 15px;
margin-bottom: 10px;
a {
padding: 20px;
transition: color 0.2s ease-in;
display: block;
}
&:hover {
a {
color: ${(props) => props.theme.accentColor
display: block
};
}
}
`;
앞으로 자주 보게 될 transition.... 그는 특별한 라이브러리가 필요없는 css 속성일 뿐이다
a 의 display block 설정은 기억해야할 듯. 글자만 눌러야 클릭되는건 좋은 환경이 아니니,,
또한 리스트의 패딩을 뺴서 a로 주면 클릭할 수 있는 영역이 넓어져 유저가 사용하기 좋을 것