Code & Beyond

Context란?React에서 Context는 컴포넌트 트리 전체에 데이터를 직접 전달할 수 있는 기능이다. 기본적으로 React는 데이터를 상위 → 하위로 props를 통해 전달하지만, 앱이 커질수록 이 방식은 점점 번거로워지고 복잡해진다. 언제 이런 문제가 생길까?로그인 상태, 테마, 언어 설정 등여러 컴포넌트에서 공통으로 사용하는 데이터가 있을 때부모 → 자식 → 손자 → 증손자...이렇게 계속 props로 상태를 전달해야 할 때이런 상황을 props drilling이라고 부르며, 컴포넌트 구조가 깊어질수록 관리하기 어렵고, 코드도 지저분해지는 문제가 생긴다. 🙋 왜 Context를 써야 했을까?Spotify 클론 프로젝트를 만들면서, 현재 재생 중인 트랙, 재생 여..

같이 진행하던 사이드 프로젝트를 리팩토링하던 중, 처음부터 눈에 띄는 컴포넌트가 하나 있었다. 바로 카드(Card)와 슬라이더(Slider) 컴포넌트였다. 프로젝트 안에는 앨범, 아티스트, 트랙을 각각 보여주는 카드 컴포넌트가 있었고, 이를 감싸는 슬라이더 컴포넌트 또한 각각 따로 구현돼 있었다. 즉, AlbumCard, ArtistCard, TrackCard... 그리고 AlbumSlider, ArtistSlider, TrackSlider처럼 중복된 컴포넌트가 줄줄이 이어져 있었다. 그렇지만 이 카드들은 사실 거의 동일한 구조를 가지고 있다.이미지가 있고타이틀과 서브타이틀이 있고클릭하면 다른 페이지로 이동하거나버튼 하나가 추가로 붙는 정도였다. 단지, 어떤 API를 받아오는지, 어디로 이동하는지, 버튼..

CRA란?**CRA(Create React App)**는React 프로젝트를 빠르게 시작할 수 있도록 도와주는 공식 CLI 툴 CRA가 해주는 일CRA를 사용하면 아래 작업을 자동으로 처리Webpack, Babel, ESLint, Jest 등 복잡한 설정 없이 시작 가능기본적인 개발 서버, 빌드 도구 세팅 자동 완료TypeScript 템플릿, 테스트 환경도 옵션으로 제공파일 하나 치면 바로 React 앱 실행됨 (npx create-react-app my-app) CRA 절대경로 설정이 안되는 이유 React 프로젝트를 진행하면서 상대경로(../../../features/homepage/Card)에 질려 tsconfig.json에 절대경로 alias 설정을 넣었다. { "compilerOptions":..