[TIL] 내배캠4기-React-47일차

이번 리액트 숙련 강의 과제는 라우터와 리덕스를 적용하여 다시 만드는 투두리스트였는데, 한 주 동안 입문 강의 레벨을 복습하며 투두리스트를 여러번 다시 만드는 것에 집중해서 결국...

스타일드 컴포넌트로만 수정한게 최선이였고, 다시 주말을 이용해 리덕스를 어떤 식으로 써야하는건지 이해해보는 시간을 가져야겠다..🥹
+ 오후에 진행된 튜터님의 과제 리뷰를 보면서 리덕스 과제에 대한 막막함? 이 조금 사라진 것 같다.

---

Styled Component

하나의 jsx파일에 css코드를 함께 적을 수 있다. (인라인 스타일 nono)

const StLiTodoCard = styled.li`
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  width: 200px;
  height: 200px;
  /* 백그라운드 컬러와 동일하게 */
  /* 보더 픽셀을 없앴더니 호버될 때마다 깨져서 꼭 픽셀을 주어야겠다.. */
  border: 3px solid #fff6f0;
  background-color: #fff6f0;
  border-radius: 15px;
  &:hover {
    border: 3px solid #ffacc7;
  }
`;

스타일드 컴포넌트 hover

• .CSS 코드

.todo-card {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  width: 200px;
  height: 200px;
  /* 백그라운드 컬러와 동일하게 */
  /* 보더 픽셀을 없앴더니 호버될 때마다 깨져서 꼭 픽셀을 주어야겠다.. */
  border: 3px solid #f6f6c9;
  background-color: #f6f6c9;
  border-radius: 15px;
}
.todo-card:hover {
  border: 3px solid #ffacc7;
}

스타일드 컴포넌트로 바꿔주면서 저 hover는 어떻게 써줘야하나 궁금했다.
찾아보니 같은 중괄호 안에 &으로 연결해줄 수 있다고 한다!

...
background-color: #fff6f0;
  border-radius: 15px;
  &:hover {
    border: 3px solid #ffacc7;
  }

&:hover
&:focus
이렇게 앞에 &을 써주면 굳이 분리해서 작성하지 않아도 된다고~