프로그래머스 데브코스 73일차 with. TS 웹 풀스택

📚요약

지난 시간에 이어 프로젝트를 진행하는데 오늘은 컴포넌트를 테스트하는 방법, forwardRef 컴포넌트 생성 및 기타 프로젝트를 진행해 보겠습니다.

 

📖Book Store 프로젝트

📄테스트 코드

테스트 코드란 기능과 동작을 테스트하는 데 사용되는 코드입니다. 쉽게 말해 요구사항을 구현한 함수 또는 기능이 예상한 대로 동작을 정상적으로 하는지 확인하기 위한 코드입니다. 자바스크립트를 사용하면 JEST라는 프레임워크를 사용해 테스트를 진행할 수 있습니다.

 

📑컴포넌트 테스트

리액트에서 컴포넌트에 대한 테스트 코드를 작성하기 위해서는 JEST 뿐만 아니라 React Testing Library를 함께 사용하게 됩니다.

 

확인할 수 있는 테스트 내용

• 렌더 확인
• props 적용 확인
• css 적용 확인
• ref 확인
• property 적용확인
• 이외 기타 등등

// 간단한 렌더 확인 코드
import { render, screen } from "@testing-library/react";

describe("Button 컴포넌트 테스트", () => {
  it("렌더 확인", () => {
    render(
      <button>
        버튼
      </Button>
    );
    expect(screen.getByText("버튼")).toBeInTheDocument();
    // 버튼이라는 텍스트가 있는 것을 확인해 렌더링이 되었는지 테스트
  });
});

테스트 결과 화면

 

📄forwarRef()

리액트에서는 ref라는 것을 이용해서 HTML 요소에 접근할 수 있습니다. ref를 props로 넘겨주고 싶은 상황이 발생할 수 있습니다. 하지만 ref를 props로 넘겨주게 되면 `ref는 prop이 아니다`라는 메시지와 함께 에러가 발생하게 됩니다. 이를 해결하기 위해서 사용되는 것이 forwardRef입니다.

자세한 내용은 공식 사이트에서 확인할 수 있습니다.

 

진행 중인 프로젝트의 코드는 Github에서 확인할 수 있습니다.

ProgrammersSchool/FE-BOOKSTORE/bookstore at main · nulzi/ProgrammersSchool

 

❔▪❓

Q. 중복된 스타일을 상위 태그에 적용해서 중복 코드를 줄이지 않는 이유

A. 중복 코드를 작성하더라도 각각의 태그에 스타일을 적용해 두면 변화가 많은 경우에 대처하기 쉽다. 따라서 스타일의 변화가 많은 경우에는 중복이 발생하더라도 어느 정도 허용해 주는 것이 편할 수 있다.

 

Q. gray와 grey의 차이

A. gray는 미국식 grey는 영국식이다.

 

다음 시간에 계속...

 

출처 & 참고

문윤기 강사님의 강의

JEST 소개 & 기본 사용법 정리, inpa, 2024.07.17

forwardRef 사용법, daleseo, 2024.07.17