Frontend Dev/React (7) 썸네일형 리스트형 React에서 SVG 컴포넌트로 불러오기 (Vite + TS 환경에서 SVG 파일 가져오기 feat. vite-plugin-svgr) ✏️ 사이드 프로젝트 "스무디"를 개발하며 배운 점을 정리하여 기록한 글입니다. 팀 프로젝트와 개인 프로젝트를 하며 SVG를 사용할 일이 있었는데, SVG 파일의 장점을 살려 활용하기 위해 컴포넌트로 불러와 사용하고자 하였다.그 과정을 정리해보았다. 🔖 목차1. SVG (Scalable Vector Graphics) 가 무엇인가요?2. SVG 이미지를 사용하는 방법 2가지 ① img 태그의 src에 직접 넣어 사용하기 ② SVG 파일을 컴포넌트로 불러와 사용하기 ⭐ Vite + TypeScript 환경에서 SVG를 컴포넌트로 불러오는 방법3. React에서 컴포넌트로 불러온 SVG 활용하기 1. SVG (Scalable Vector Graphics) 가 무엇인가요?SVG는 2차원 벡터 그래픽을 .. React의 Props Drilling과 상태관리 👾 Props Drilling이란? Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다. 👾 Props Drilling의 문제점 • 코드의 가독성이 나빠진다. • 코드의 유지보수가 어렵게 된다. • state 변경 시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. → 웹 성능에 악영향을 줄 수 있다. 👾 Props Drilling을 방지하기 위한 방법 1. 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법 2. 상태관리 라이브러리를 사용하는 방법 → 상태관리 라이브러리를 사용하게 되면 .. React Hooks - useEffect useEffect는 리액트의 라이프사이클을 제어하는 메서드를 가져올 수 있는 기능을 가진 Hook으로, 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있다. // useEffect 문법 import { useEffect } from "react"; useEffect(() => { // 1. Callback 함수 }, []); // 2. Dependency Array(의존성 배열) • Callback 함수 첫번째 매개변수로 함수가 들어간다. → 함수가 호출된 타이밍은 렌더링 결과가 실제 돔에 반영된 직후이다. • useEffect 두번째 매개변수 // 1. 두번째 매개변수로 아무것도 전달하지 않으면 화면이 리렌더링 될때마다 매번 실행된다. useEffect(() => { console.log("ch.. React의 데이터 흐름 - React로 UI를 구현하기 위한 단계 👾 React로 UI를 구현하기 위한 단계 💬 이번 글은 React 공식문서의 글을 공부하며 나름대로 정리한 내용입니다. 자세한 내용은 아래 React 공식문서 참고하며 학습하면 좋을 것 같습니다. 🙂 React로 사고하기 – React The library for web and native user interfaces ko.react.dev 1. UI를 컴포넌트 계층으로 쪼개기 📌 컴포넌트로 생각하기 → 단일책임 원칙을 반영하고자 한다면 컴포넌트는 이상적으로는 한 가지 일만 해야 한다. 만약 컴포넌트가 점점 커진다면 작은 하위 컴포넌트로 쪼갠다. 2. React로 정적인 UI 구현하기 • 정적인 버전을 먼저 만들고 상호작용을 개별로 추가하는 것이 더 쉬운 방법이다. • 데이터 모델(제품의 원본 목록)을.. React 기본, props 사용하기 👾 props란? • props는 컴포넌트의 속성을 의미한다. props는 변하지 않는 immutable한 데이터이다. • props는 부모 컨포넌트에서 자식 컨포넌트로 또는 구성 요소 자체에서 데이터를 전달하는데 사용된다. 즉, 어떤 값을 컴포넌트에게 전달해줘야 할 때 사용한다. • React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다. • props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다. • props는 외부로부터 .. React state와 간단하게 알아보는 useState 👾 state란? • state는 컴포넌트 내에서 변할 수 있는 값, 즉 상태를 의미한다. • React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다. (UI가 자동으로 업데이트됨) • state는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. 즉, props는 컴포넌트를 사용하는 외부자를 위한 데이터고, state는 컴포넌트를 만드는 내부자를 위한 데이터이다. 👾 useState import { useState } from 'react'; // useState 호출 const [state, setState] = .. React 기본, JSX(JavaScript XML)와 JSX 문법 규칙 한번에 알아보기 👾 JSX(JavaScript XML)란? JSX는 JavaScript를 확장한 문법으로 React에서 UI를 구성할 때 사용한다. JSX는 React에서 UI 컴포넌트를 선언적으로 작성하기 위해 도입되었다. 기존의 JavaScript 코드 안에 HTML과 유사한 구문을 인라인으로 작성하여 UI 요소를 표현할 수 있게 한다. 이는 UI와 관련된 로직과 마크업을 한 곳에서 작성할 수 있어 개발자에게 편리함을 제공한다. JSX를 사용하면 JavaScript 변수, 함수, 표현식 등을 마크업 안에서 중괄호({})로 감싸서 사용할 수 있다. 이를 통해 동적인 값을 템플릿에 쉽게 삽입하고, 조건문과 반복문 등을 활용하여 유연한 UI를 생성할 수 있다. JSX는 JavaScript가 확장된 문법이지만, 브라우저가 .. 이전 1 다음
