일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Database
- HTML
- API
- this
- IntersectionObserver
- firestoredatabase
- useEffect
- http
- TMDB
- db
- SQL
- data
- Cloud
- github
- Github Pages
- CSS
- bootstrap
- REACT
- til
- web
- Protocol
- jQuery
- nosql
- Boostrap
- W
- url
- supabase
- Fetch
- JavaScript
- 배포
- Today
- Total
072DATA
안녕 오늘은 부모 -> 자식 -> 자식의 자식의 형태로 내려오면 나타나는 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..