072DATA

React로 개발하면서 여러 페이지를 구현해야 할 때 매우 유용한 react router dom에 대해서 정리해보겠습니다. React Router DOMreact-router-dom은 React에서 페이지를 라우팅하고 관리할 수 있게 해주는 라이브러리임따라서 react-router-dom을 사용하면 URL로 화면에 표시할 컴포넌트를 쉽게 변경할 수 있음 설치 방법npm install react-router-dom  React Router Dom을 설치하고 아래 코드 예시대로 사용법을 살펴보자잉 Router, Routes, Route - 경로 설정 (코드 예시)import { Routes, Route } from 'react-router-dom';import Home from './components/Ho..

안녕React로 개발하다보면 불필요한 로직으로 인해 리렌더링 시 페이지의 성능이 떨어질 수 있는데이를 방지하기 위해 useMemo 훅을 사용하여 컴포넌트를 최적화하는 방법을 적어보겠습니다  useMemo useMemo는 React에서 제공하는 훅으로 특정 결과를 메모이제이션하여 성능을 최적화하고의존성 배열을 사용해 값이 변경되지 않으면 계산을 반복하지 않고 저장된 결과를 재사용함 코드 예시import React, { useState, useMemo } from "react";const HeavyComponent = () => { const [value, setValue] = useState(0); const heavyWork = () => { for (let i = 0; i heavyWork(..

안녕  오늘은 부모 -> 자식 -> 자식의 자식의 형태로 내려오면 나타나는 prop Drilling을해결할 수 있는 Context API의 useContext를 사용하고 정리해봄  Prop drilling 리액트 애플리케이션에서 데이터 전달은 주로 props를 통해 이루어짐하지만 컴포넌트 구조가 깊어질수록 데이터 전달 과정에서 Prop Drilling 문제가 발생할 수 있고Prop Drilling은 데이터를 필요로 하지 않는 중간 컴포넌트가 단순히 데이터를 전달하기 위해props를 받게 되는 비효율적인 구조를 의미함이는 컴포넌트의 구조를 복잡하게 만들고, 유지보수와 디버깅을 어렵게 만듦 이 문제를 해결하기 위해 리액트는 Context API를 제공하고Context API는 특정 컴포넌트 트리 내에서 전역..

useRef React에서 제공하는 훅으로 함수 컴포넌트에서 DOM 요소에 접근하거나리렌더링과 상관없이 값을 유지할 수 있는 변수를 관리할 때 유용   주요 기능  DOM 요소에 접근하기 import { useRef } from 'react';function InputFocus() { const inputRef = useRef(null); const focusInput = () => { inputRef.current.focus(); }; return ( Focus Input );} 위 코드에서는 input 요소에 ref를 연결해 버튼 클릭 시 해당 입력 필드에 포커스를 줄 수 있음     값 저장 및 유지 useRef는 컴포넌트가 리렌더링되더라도 변경되지 ..

useEffect useEffect는 React에서 비동기 작업, 구독, 타이머 설정 등 다양한 작업을 처리하는 강력한 도구이며React에서 컴포넌트의 생명주기 동안 발생하는 효과를 처리하기 위해 사용하는 Hook 임 Hook을 사용하면 컴포넌트가 렌더링될 때 특정 작업을 수행하거나특정 상태가 변경될 때 작업을 수행하도록 설정할 수 있음    기본 사용법  useEffect(() => { // 실행할 코드}, [dependencies]);  첫 번째 매개변수는 실행할 함수두 번째 매개변수는 의존성 배열이 배열에 값이 변경될 때만 함수가 실행됨 빈 배열 []을 전달하면 컴포넌트가 처음 마운트될 때만 실행되고 그 이후에는 실행되지 않음의존성 배열이 없는 경우useEffect(() => { // 컴포넌트가..

안녕오늘은 개인과제를 다시 타임어택으로 재 작성하였는데 이를 다시 복습하고자 블로그로 정리해보았습니다. 해당 코드는 React에서 부모 -> 자식간의 상태 관리와 컴포넌트의 재사용성에 중점을 두어 작성하였습니다.   Parent 컴포넌트 전체 애플리케이션의 상태를 관리하며메달 정보를 입력하고 업데이트하는 역할입니다.  import React from "react";import { useState } from "react";import Form from "./Form";const Parent = () => { const [countries, setCountries] = useState([]); const [formData, setFormData] = useState({ country: "", ..

스타일드 컴포넌트(Styled-Components) React에서 스타일링을 쉽게 할 수 있도록 도와주는 CSS-in-JS 라이브러리!스타일드 컴포넌트를 사용하면 컴포넌트에서 스타일을 정의하고자바스크립트 코드 내에서 CSS를 작성하는 방식으로 동작해유  특징 CSS와 JS의 결합: CSS 코드가 JS안에 포함되고  스타일과 로직을 하나의 컴포넌트로 관리할 수 있음동적 스타일링: props나 상태에 따라 스타일을 동적으로 변경할 수 있어 유연한 스타일링이 가능함자동 클래스명 생성: 고유한 클래스명을 자동으로 생성해주어 클래스명 충돌 문제를 방지할 수 있음  사용법  설치npm install styled-components 스타일드 컴포넌트를 설치하슈   사용예제 import styled from 'styl..

안녕 시작하기에 앞서서 개인프로젝트 진행중value라는 속성을 굳이 왜 써야하나 하고 공부하다 보니제어 컴포넌트와 비제어 컴포넌트에 대해서 정리하게 되었다..    비제어 컴포넌트 value 속성이 없는 입력 필드는 비제어 컴포넌트인데이 경우 입력 필드의 값은 React 상태와 직접 연결되지 않습니다사용자의 입력은 DOM에서 직접관리하여입력 필드의 값은 상태가 아닌 입력필드 자체에 저장됩니다     여기서는 value 속성이 없기 때문에입력필드의 값은 React 상태와 연결되지 않고사용자 입력에 의해 직접적으로 관리됩니다!  장점 상태관리가 필요 없는 간단한 입력필드에서는 비제어 컴포넌트를 사용할 수 있음간단한 폼이나 사용자의 입력을 직접적으로 처리할 때 유용할 수 있음단점 입력 필드의 값을 추적하려면 ..

컴포넌트란?  리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각 같은 것    컴포넌트 종류  함수형 컴포넌트: 함수로 정의되며, props를 받아 JSX를 반환함 클래스형 컴포넌트: 클래스로 정의되며, render() 메서드를 통해 JSX를 반환함  Props란? props는 컴포넌트에 전달되는 데이터임컴포넌트의 외부에서 입력받은 값으로 컴포넌트의 렌더링 방식에 영향을 미침 Props의 특징 읽기 전용: props는 컴포넌트 내부에서 수정할 수 없음  전달 방법: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됨   디폴트 값 설정: 기본값을 설정하려면 defaultProps를 사용함 MyComponent.defaultProps = { message: "기본 텍스ㅡ트"}..