[TIL] 항해99 16일차

개인과제의 기능 구현을 실현했다.
컴포넌트에서 값을 정리하거나 함수를 만들어야 하는 곳의 위치를 파악하지 못했는데 팀원의 도움으로 파악 하게되었고 알고리즘 같은 기능을 풀었다.

내가 온전히 완성한것이 아니라 조금 더 복습하고자 글을 쓴다.

상세페이지에 클릭한 요일의 날짜를 띄어주기

위 사진 속 요일을 띄워야 하는데 처음에는 기능을 어떻게 써야하는지 조차감이 오지 않았으나 도움을 받아보니 감이 잡히기 시작했다.

먼저 리액트 홈역할을 하는 컴포넌트에 days라는 이름으로 요일 배열을 만들어준다.

만든 데이터는 상세페이지 컴포넌트에 props로 값을 받게되며 {} 중괄호를 사용하여 값을 지정해준다.

import useParams from 'react-router-dom';


const {days} = useParams();

유즈파람즈라는 리액트 훅을 사용하여 값을 선언해주고
하단 html부분에 {days}를 넣어주면 되는 간단하고 쉬운 작업이었다.

추가로 app.js 파일에 Routes로 묶어둔 곳에 path='/detail'에서 path='/detail/:days'로 변경한다.

평점 고르기(색칠하기)

제일 난관을 겪은 기능 중 하나다.

원하는 1~5번째 동그라미 중 하나를 택하면 오른쪽은 그대로 왼쪽은 색채우기를 만들어야 했다.

총 3가지의 스킬을 배웠는데 일단
하나의 원에 색을 입히는 css를 정리해 두고 그것을 module.css에 저장하는 것이다.

.changeBack { //노란색으로 바꾸는 css
  background-color: yellow;

  padding: 20px;
  margin: 12px auto;
  border-radius: 50%;
  cursor: pointer;
}

모듈 파일을 같은 폴더경로에 생성하여 이름.module.css로 만들어준다.

이후
import styles from "./Detail.module.css"; 로 임포트 하면 상세페이지에서도 사용 가능하다.

<div> className={styles.rate} id="1" onClick={ChangeColor}</div> 

이런식으로 클래스네임을 정해주어야 한다.
이후 각 원을 가진 div에 className, id, onClick을 설정한다.

const ChangeColor = (e) => {
    const id_num = e.target.id;
    // console.log(id_num)
    for (let i = 1; i <= 5; i++) {
      const num = document.getElementById(i);
      // console.log(num)
      if (i <= id_num) {
        // 1~5보다 id_num이 크거나 같으면
        if (!num.classList.contains(styles.changeBack)) {
          // 클 때 num의 값이 스타일이 있는지 조건 (느낌표 붙여서 false먼저)
          num.classList.add(styles.changeBack); // 스타일이 없으니 스타일을 넣어주라
        }
      } else {
        // 1~5보다 id_num이 작을 때
        if (num.classList.contains(styles.changeBack)) {
          // 스타일이 있는지 확인해보고 있다면
          num.classList.remove(styles.changeBack); // 스타일을 지워라
        }
      }
    }
  };

이게 색칠하기 함수
1부터 5의 숫자 중 클릭한 원의 id의 값이 크거나 같다면
num(반복한 i번쨰 id)의 값이 스타일이 있는지 확인하는 조건
있지 않다면 스타일을 추가해주는 조건

만약 1부터 5의 숫자 중 클릭한 원의 id의 값이 작다면
스타일이 있는지 확인하고 있다면 스타일을 지우는 조건

풀이하자면 이런말이고 이말을 위 코드로 구현한것이다

도움 받으면서 새로 알게된 메서드들이 있어서 정리를 해보자

classList

클래스 속성의 컬렉션인 활성을 반환하는 읽기 전용 프로퍼티이다.
속성이 설정 되어 있지 않다면 elementClasses.length는 0을 반환한다.

추가 사용 가능한 메서드

add( String [, String [, ...]] )

지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

remove( String [, String [, ...]] )

지정한 클래스 값을 제거한다.

contains( String )

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

위에 코드에서 사용한 메서드들

item( Number )

콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

toggle( String [, force] )

하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다

replace( oldClass, newClass )

존재하는 클래스를 새로운 클래스로 교체한다.

이렇게 많은 속성을 가지고 있는 함수를 처음 보게되어 엄청난 이득이었다.
클래스를 삭제 추가 반환 토글 교체 확인 등등 여러가지 일을 하며
클래스를 통한 스타일 사용시 유용하게 사용할거 같다.
그밖에도 활용할 수 있는것들이 있다면 메모하자

난수 생성하기

과제 중 랜덤한 숫자를 생성하여 메인 화면에 원에 랜덤하게 색칠하기.

  const mon = Math.floor(Math.random() * 5) + 1;
  const tue = Math.floor(Math.random() * 5) + 1;
  const wed = Math.floor(Math.random() * 5) + 1;
  const thu = Math.floor(Math.random() * 5) + 1;
  const fri = Math.floor(Math.random() * 5) + 1;
  const sat = Math.floor(Math.random() * 5) + 1;
  const sun = Math.floor(Math.random() * 5) + 1;

조건은 1~5 사이의 숫자를 생성하기.
random은 랜덤 숫자를 생성해주며
floor은 주어진 숫자와 같거나 작은 정수 중에서 가장 큰수 반환

이렇게 식을 완성하고

<Scores index={1} random={mon} />

원안에 인덱스 번호와 랜덤에 값을지정해 준다.

const Scores = styled.div`
  padding: 20px;
  margin: 12px auto;
  background-color: ${(props) =>
    props.index <= props.random ? "yellow" : "#eee"};
  border-radius: 50%;
`;

마지막으로 이부분이 제일 큰 충격이었다.
스타일드 컴포넌트를 설치해서 사용했는데
내가 아는css에 함수와 if문을 사용하는것이 너무 신기했다.

백그라운드 컬러의 색을 props로 받아서 인덱스 번호보다 랜덤으로 생성된 숫자가 크거나 같다면 뒤에 코드대로 조건 넣어주기였다.

이렇게 크게 3가지 기능을 구현하여 과제를 마무리 지었고 s3에 올려두었다.

혼자 구글링해가며 찾는 시간에 얻었던 지식이 양이 동료에게 도움받아 얻은 양보다 적었다..

물론 도움을 받아 해결하고 이를 다시 복습하면서 내것으로 익히기에는 너무좋았으며 새로운 함수와 사용법들을 직접 사용하게 되어 알찬하루였다.

다만 직접 찾아 해결했으면 하는 아쉬움이 조금 남아 있지만 얻는게 많아 기분이 좋다.