앨리스코딩 개인프로젝트 회고록 2탄 /비디오 클립 & styled component 조건문

오늘은 프로젝트 페이지를 구현하면서 많은것을 배웠다. 먼저 비디오 슬라이드를 만들었는데 다음 슬라이드로 넘어갈때마다 background image를 바꿔줘야 되었기때문에 한번 문제에 부딫혔다.
나는 scss만 조건문을 쓸수 있는줄알았는데, styled component도 조건문을 쓸수 있다는것을 구글링을 통하여 알게 되었고 바로 적용해 보았다.

const Section = styled.section`
  width: 100%;
  height: 80vh;
  background-image: ${(props) =>
    props.id === 1 || props.id === 2
      ? "url(빈트에이지.png)"
      : props.id === 3 || props.id === 4
      ? "url(비행기.png)"
      : "url(비행기.png)"};
  background-size: cover;
  background-repeat: none;
  position: relative;
`;

위의 코드와 같이 props로 태그를 받아와서 태그의 프로퍼티에 접근이 가능하였고, 삼항연상자를 이용하여 조건문을 작성하면 된다.

이를 구현하면서 나는 그저 styled component가 가독성이 좋은것같아서 사용하고 있었는데 사용이유에 의문이 들어서 공부를 해보았다.

styled-components 장점

장점에는 크게 세가지가 있었다.

1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일을 넣을 수 있다.

2. 컴포넌트에 적은 스타일이 다른 JS 파일로 오염되지 않는다.

3. 컴포넌트에 적은 스타일은 html 페이지의

4. CSS파일에서도 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 제공한다.

5. 컴포넌트명.module.css 이렇게 CSS 파일을 작명하면 된다.그리고 컴포넌트명.js 파일에서 import 해서 쓰면 그 스타일들은 컴포넌트명.js 파일에만 적용된다.

장점들을 알아보면서 더욱더 styled component가 좋아졌다.

Video STOP Skip 기능 구현하는법

오늘 두번째로 알게된사실! 리액트의 useRef 훅을이용하면 해당 태그의 레퍼런스를 다 가져올수가 있었다. 따라서 console.log로 내장객체들을 확인하고 video태그의 내장 메서드인 play(), pause() 메서드를 발견하였다!!! 정말 어떻게 해야될지 막막했는데 레퍼런스를 해부하면된다는 사실을 오늘 깨달아서 너무 좋았다. 또한 skip 기능도 currentTime 프로퍼티를 가져와서 원하는만큼 더하고 빼주면 된다. 아래는 내가 구현한 코드이다.

   const handlePlay = () => {
    videoRef.current.play();
  };
  
  const handleNextPlay = () => {
    videoRef.current.currentTime += 10;
  };
  
  const handlePrevPlay = () => {
    if (videoRef.current.currentTime === 0) {
      videoRef.current.currentTime = 0;
    }
    videoRef.current.currentTime -= 10;
  };
  
  //렌더링부분 코드
  
     <video 
            style={{ width: "600px" }}
            id="vid"
            ref={videoRef}
            controls
          >
            <source src={data[0].src}></source>
          </video>

오늘 많은것을 배워 너무나도 뿌듯한 하루 였다.
부족한점이 많다는것을 항상 느끼지만 계속 노력해서 주변사람들에게 도움이 되는 사람이 되고 싶다.