ByteCraft

개요import { useEffect, useRef } from "react";function FileInput({ name, value, onChange }) { const inputRef = useRef(); const handleChange = (e) => { const nextValue = e.target.files[0]; onChange(name, nextValue); }; return ;}export default FileInput;useRef()가 뭔가? React의 refReact의 ref는 DOM 요소나 클래스 컴포넌트 인스턴스에 직접 접근할 수 있도록 도와주는 기능입니다. 🔹 ref의 주요 개념 DOM 요소 접근: ref를 사용하면 document.querySelec..

개요function ReviewForm() { const [values, setValues] = useState({ title: "", rating: 0, content: "", }); const handleChange = (e) => { const { name, value } = e.target; setValues((prevValues) => ({ ...prevValues, [name]: value, })); }; return ( 확인 );} 의 입력값을 하나의 state로 묶어서 관리한다. const [values, setValues] = useState({ title: "", ..

개요const nextRating = Number(e.target.value) || 0;Number(e.target.value)에 값이 없을 경우 기본값을 0으로 설정. 단락 평가(short-circuit evaluation)이 문법은 **"단락 평가(short-circuit evaluation)"**를 활용한 "논리 OR 연산자(||)를 이용한 기본값 설정(default value assignment)" 패턴입니다. 1. 단락 평가 (Short-Circuit Evaluation)|| 연산자는 왼쪽 값이 Falsy(거짓 같은 값)면 오른쪽 값을 반환합니다.따라서 Number(e.target.value)가 NaN(Falsy)이면 0을 반환합니다. 2. 논리 OR 연산자를 이용한 기본값 설정이 패턴은 Jav..

옵셔널 체이닝(Optional Chaining) 개요옵셔널 체이닝(Optional Chaining, ?.)은 객체 프로퍼티가 존재하지 않을 경우 오류 없이 안전하게 접근할 수 있도록 도와주는 문법입니다.✅ 주요 특징객체 프로퍼티가 null 또는 undefined일 경우 즉시 undefined 반환긴 체이닝에서도 안전하게 접근 가능불필요한 if 문이나 && 연산자를 줄여 코드 가독성 향상1️⃣ 기본 문법const user = { profile: { name: "Alice", },};console.log(user.profile?.name); // "Alice"console.log(user.profile?.age); // undefined (존재하지 않는 프로퍼티)console.log(user.ac..

개요useEffect(() => { handleLoad();}, []); 해석:useEffect 내부의 함수 () => { handleLoad(); }는 컴포넌트가 마운트될 때 실행됩니다.**의존성 배열 []**이 비어 있으므로, handleLoad()는 한 번만 실행됩니다.handleLoad()는 사용자가 정의한 함수로, 데이터를 로드하거나 초기화 작업을 수행하는 함수일 가능성이 큽니다.useEffect() 개요useEffect()는 React의 훅(Hook) 중 하나로, 컴포넌트의 라이프사이클 동안 부수 효과(side effects)를 처리할 때 사용됩니다. 1.기본 문법useEffect(() => { // 실행할 코드});→ 컴포넌트가 렌더링될 때마다 실행됨 2.의존성 배열(Dependency ..

개요// api.jsexport async function getReviews() { const response = await fetch("https://learn.codeit.kr/5235/film-reviews"); const body = await response.json(); return body;}// App.jsconst handleLoadClick = async () => { const { reviews } = await getReviews(); setItems(reviews);}; fetch(), await을 이해 하기 위해 정리함. fetch()fetch()는 JavaScript에서 네트워크 요청을 수행하는 API로, 비동기적으로 리소스를 가져올 때 사용됩니다.Promise 기반..

개요function ReviewList({ items, onDelete }) { return ( {items.map((item) => { return ( ); })} );}react 학습 중 items.map((item) => { 부분을 이해 하기 위해 .map()을 정리함. Array.prototype.map() 메서드JavaScript에서 배열의 각 요소를 순회하면서 주어진 콜백 함수를 적용한 결과를 새로운 배열로 반환하는 메서드입니다.원본 배열은 변경되지 않습니다. 문법const newArray = arr.map(callback(currentValue, index, array), t..

구조분해할당(Destructuring assignment)은 객체나 배열의 속성 또는 요소를 간단하고 직관적으로 추출하여 변수에 할당할 수 있게 해주는 JavaScript의 문법입니다. 이를 사용하면 코드의 가독성과 효율성을 높일 수 있습니다.1. 배열 구조분해할당배열의 요소를 변수로 쉽게 추출할 수 있습니다.const array = [1, 2, 3];// 구조분해할당const [a, b, c] = array;console.log(a); // 1console.log(b); // 2console.log(c); // 3기본값 설정배열의 값이 없을 경우 기본값을 설정할 수 있습니다.const array = [1];const [a, b = 10] = array;console.log(a); // 1console...

ContextProps DrillingContext.Provider리팩터링useContext구조 재설계와 Context 분리ContextReact Component Tree 전체를 대상으로 Data를 공급하는 기능Props Drilling 문제를 해결하기 위해 Context 사용ContextAPI는 Context를 만들고 다루는 React 기능 - React.createContext() : Context 생성 - MyContext.Provider : Context 배포 - useContext() : //App.jsimport React from "react";import { useMemo, useCallback, useReducer, useRef, useState } from "react";import ..

useCallback은 React Hook 중 하나로, 함수 컴포넌트에서 함수를 메모이제이션하는 데 사용됩니다. 이 Hook은 렌더링 시마다 새로 생성되는 함수를 방지하여 성능을 최적화하는데 도움을 줍니다. 주로 자식 컴포넌트에 함수를 전달할 때 불필요한 렌더링을 방지하는 데 유용합니다.기본 사용법import { useCallback } from 'react';const MyComponent = () => { const handleClick = useCallback(() => { console.log('Button clicked'); }, []); // 빈 배열은 이 함수가 컴포넌트가 마운트될 때 한 번만 생성됨을 의미 return Click me;};의존성 배열useCallback의 두 번째..