React의 렌더링, 왜 알아야 할까?React를 배우다 보면 '렌더링'이라는 단어를 자주 접하게 된다.렌더링이란 도대체 무엇이고 왜 중요할까? React는 사용자의 행동이나 상태 변화에 따라 UI를 업데이트한다.이때 UI가 어떻게 바뀌는지를 결정하고 실제로 화면에 보여주는 과정을 `렌더링(Rendering)`이라고 한다.즉, React에서의 렌더링은 애플리케이션의 성능과 사용자 경험을 좌우하는 핵심 개념이다. 그렇기 때문에 우리는 React를 공부하면서 렌더링 과정을 깊숙이 이해할 필요가 있다.렌더링 과정을 이해하게 되면, 성능 최적화를 위해 어떤 부분을 건드려야 하는지 자연스럽게 알게 되기 때문이다. 그래서 이번 글에서는 React의 렌더링 과정은 구체적으로 어떻게 흘러가고, Virtual DOM이 ..

개요저번 프로젝트에서 북마크 기능을 구현해본 경험이 있었다.하지만 그때는 마감시간에 급박하게 짜느라 코드를 깔끔하게 작성하지 못했다.또한, 구현했던 내용을 정리하지 못해 잘 기억도 나지 않았다.이번에는 잊지 않기 위해 북마크 기능에 대한 내용을 정리해보려고 한다. 북마크 기능 구현 환경 및 순서아웃소싱 프로젝트에서는 BaaS(Backend as a Service)인 supabase와 Tanstack Query를 사용했다.프론트엔드에만 집중하기 위하여 supabase를 이용하였고, 서버 상태를 관리하기 위하여 Tanstack Query를 선택하였다. 🚩 북마크 기능 구현의 순서1. supabase에 bookmarks 테이블 만들기2. bookmarks 테이블에서 사용자가 북마크한 데이터 가져오기3. 북마..

Styled Componet를 사용하면서 느낀 점Styled Component를 자주 사용하게 되니 이제 익숙해졌다.styled componet를 사용하면서 내가 느낀 장점은 다음과 같다. ✅ Styled Component 사용하면서 느낀 점1. 태그명을 내가 원하는 대로 작성할 수 있다.2. props을 이용해서 조건에 따라 색깔이나 폰트 크기를 다르게 할 수 있다.3. 공통적으로 쓰이는 styled component가 있을 경우, 재사용할 수 있게 만들 수 있다.4.  className을 일일이 줄 필요가 없다. Styled Componet를 사용하면서 들게 된 의문어느 날, styled component를 아무 생각없이 사용하다가 문득 몇개의 의문이 들었다.🤔 왜 항상 styled componen..

useContext는 무엇인가컴포넌트 트리 전체에서 데이터를 전달하기 위해 사용하는 훅부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하려면 props drilling 형태로 전달하였다.만약, 컴포넌트 트리가 깊어지면 props를 일일이 전달해야되는 번거로움이 생긴다. 이때. useContext를 사용하면, 중간 컴포넌트를 거치지 않고 데이터가 필요한 컴포넌트에게 데이터를 직접 전달할 수 있다.  useContext는 언제 필요할까?1️⃣ 컴포넌트 트리가 깊어질 때예를 들어 최상위 컴포넌트에서 5단계 아래의 자식 컴포넌트로 데이터를 전달해야 한다면, props를 일일이 전달해야한다.useContext를 사용하면 중간 컴포넌트를 건너뛰고 바로 데이터를 전달할 수 있다. 2️⃣ 전역 상태 관리가 필요할 때사용..

Query String이란?url에서 ? 뒤에 오는 부분으로, 웹 페이지나 API 요청 시 서버로 전달하는 추가적인 데이터를 포함하는 문자열https://example.com/search?query=apple&category=fruit&sort=pricekey-value 형식으로 데이터를 전달한다.여러 개의 데이터를 전달할 경우, &로 구분한다. React-Router-Dom에서 Query String 사용하는 방법react-router-dom 설치하기npm install react-router-dom useNavigate 사용하기import { useNavigate } from "react-router-dom";const navigate = useNavigate();navigate(`/이동경로?valu..

React-router-domReact 애플리케이션에서 클라이언트 측 라우팅을 구현하는 라이브러리React-router-dom을 이용하면 페이지를 새로고침하지 않고도 URL을 변경하고, 해당하는 컴포넌트를 렌더링할 수 있다.React-router도 하나의 컴포넌트이다.  예시 코드와 함께 React-router-dom의 구조와 사용 방법에 대해 알아보자. React-router-dom 설치 코드yarn add react-router-dom   💻 예시 코드: 폴더 구조src 폴더 안에 pages 폴더를 추가한 뒤, Home, About, Contact, Works jsx 파일을 추가한다.shared 폴더를 추가한 뒤, Router jsx 파일을 추가한다. 💻 예시 코드// Router.jsx 파일 코..