[22.04.04] Today I Learned 💻

오늘 공부한 내용📄

1. useRef

//1. useRef를 사용해 slideRef라는 객체를 DOM에 접근할 수 있게끔 한다.
let slideRef = useRef(null);

//2. 해당 태그에 ref를 설정하면 접근이 가능케 된다.
<ul ref={slideRef}>

//3. slideRef로 DOM에 직접 접근하고 스타일 변경도 가능케 된다.
slideRef.current.style.transform = `translateX(-${currentView}00vw)`

 

 

2. styled-component에서 hover

해당 요소를 hover했을 때의 스타일이 아닌

한 요소를 hover하면 해당 요소가 아닌 다른 요소의 스타일이 변하게끔 해주고 싶었다.

const Btn = styled.span`
  width: 10px;
  height: 10px;
  background: red;
  opacity: 0;
 
  ${HoverDiv}:hover & {
    opacity: 1;
  }
`;

처음엔 HoverDiv에 직접 hover기능을 썼다.

&:hover ${Btn}으로 작성했는데 작동하지 않아서 위의 코드로 작성했더니 정상적으로 작동되었다.!

 

 

 

마무리😎

현재 index 페이지를 거의 다 구현했다!.!

리액트 라이브러리를 쓰지 않고 pure react로만 이미지 슬라이드를 만드려는 데에 애를 먹어서😭

이거 하나에 시간이 많이 걸렸다 ㅠ...

 

다른 페이지를 구현할 때는 좀 더 빨라지겠지?.?아 생각해보니까 검색 api까지 구현시켜야 된다...😇

개발자가 되는 길은 진짜 너무 험난한 듯하다... ㅎㅎ..