STOTV NOW [트러블 슈팅(3)] - 컴포넌트 분리 및 공통화

오늘은 "리액트"로 스포티비 나우를 만들면서 느낀 부분을 서술하려고 한다. 0. 닥친 문제 및 해결 방법 1.

컴포넌트 분리 필요성 저번에 네이게이션 메뉴를 만들고 본격적으로 홈 화면을 만들기 시작했다. 하지만 밑에 동영상에서 보이다싶이 홈화면에는 굉장히 많은 요소들이 들어있음을 알 수 있다.

만들다 보니 하나의 요소에도 생각보다 많은 코드가 필요했다. 일단 Home 컴포넌트에 네비게이션 만드는 코드를 짜고 Live Now 요소도 Home 컴포넌트에 만들기 시작했다.

하지만 벌써 싸함을 느꼈다.. 일단 네비게이션 메뉴를 만드는 코드만 해도 생각보다 길었기 때문에 Live Now를 만드는 코드까지 생각하면 Home 컴포넌트에만 너무나 많은 코드가 생길 수 밖에 없었다. import React, { useContext, useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; impo...