반응형 React55 JavaScript에서 특정 배열 값을 찾아 삭제하는 방법 JavaScript에서 특정 배열 값을 찾아 삭제하는 방법은 여러 가지가 있습니다. 사용 목적(원본 배열 유지 여부, 단일/다중 값 삭제)에 따라 적절한 방법을 선택하세요. 1. filter 메서드 사용 (가장 추천)특정 값을 제외한 새 배열을 반환합니다.불변성 유지 → React/Next.js 프로젝트에서 안전하게 사용 가능const fruits = ["apple", "banana", "orange", "banana"];const updatedFruits = fruits.filter(fruit => fruit !== "banana");console.log(updatedFruits); // ["apple", "orange"] 설명filter는 조건(fruit !== "banana")에 맞는 요소만 새 배.. 2025. 3. 17. addEventListener 기능 addEventListener는 JavaScript에서 이벤트를 요소에 등록할 때 사용하는 메서드입니다. 사용자가 클릭, 키보드 입력, 마우스 이동 등 특정 이벤트를 발생시킬 때 지정된 함수를 실행합니다.기본 문법element.addEventListener(event, listener, options); 매개변수 설명element: 이벤트를 등록할 DOM 요소event: "click", "mouseover", "keydown" 등 이벤트 이름 (문자열)listener: 이벤트 발생 시 실행할 콜백 함수options (선택): boolean 또는 객체로, 이벤트 처리 방식 지정 (capture, once, passive 등) 간단한 예시const button = document.querySelector('.. 2025. 3. 15. dispatch() 기능 dispatch()는 다양한 라이브러리와 프레임워크에서 상태나 액션을 전달할 때 사용되는 함수입니다. 어떤 컨텍스트에서 사용하는지에 따라 동작이 달라질 수 있습니다. 아래에 몇 가지 대표적인 예시를 소개할게요.1. Redux에서 dispatch()Redux에서 dispatch()는 액션을 리듀서에 전달하여 상태를 업데이트하는 데 사용됩니다.import { useDispatch } from 'react-redux';function Counter() { const dispatch = useDispatch(); const increment = () => { dispatch({ type: 'INCREMENT' }); // 액션을 디스패치 }; return Increment;} 설명dispatch(.. 2025. 3. 13. React Hook이란? React Hook이란?React Hook은 클래스형 컴포넌트 없이도 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 도와주는 함수입니다. React 16.8에서 도입되었으며 함수형 컴포넌트에서도 상태 관리 및 부작용(side effects) 처리를 가능하게 합니다. Hook을 사용하는 이유1. 클래스형 컴포넌트의 복잡성을 줄임기존에는 상태를 관리하려면 class 컴포넌트를 사용해야 했지만, Hook을 사용하면 function 컴포넌트에서도 상태 관리가 가능합니다.// 기존의 클래스형 컴포넌트class Counter extends React.Component { state = { count: 0 }; render() { return ( this.setStat.. 2025. 3. 3. React fetch 기능 React에서 fetch는 데이터를 가져오기 위해 사용되는 기본 JavaScript API입니다. 주로 REST API와 통신하거나 외부 데이터를 가져올 때 활용됩니다. fetch는 Promise 기반이므로 비동기 작업을 수행하는 데 적합하며 React의 상태 관리와 결합하여 유용하게 사용할 수 있습니다. 기본 사용법fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON 데이터를 파싱 }) .then(data => { console.log.. 2025. 1. 19. React useEffect 기능 React의 useEffect는 함수형 컴포넌트에서 부수 효과(Side Effects)를 처리하기 위한 훅입니다. 컴포넌트가 렌더링될 때와 특정 상태나 props가 변경될 때, 또는 컴포넌트가 언마운트될 때 실행됩니다. 주요 사용 사례데이터 가져오기 (API 호출)DOM 조작구독 및 이벤트 리스너 설정타이머 설정리소스 정리 (예: 메모리 누수 방지) 기본 사용법import React, { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); // useEffect 사용 useEffect(() => { console.log(`현재 카운트는 ${count}입니다.`); }); .. 2025. 1. 17. React useState 기능 React의 useState는 함수형 컴포넌트에서 상태 관리를 가능하게 하는 훅(Hook)입니다. 컴포넌트가 재렌더링되더라도 상태를 유지하고 상태 변경 시 UI를 업데이트할 수 있도록 돕습니다. 기본 사용법 import React, { useState } from 'react';function Counter() { // state 변수와 setter 함수 선언 const [count, setCount] = useState(0); return ( 현재 카운트: {count} setCount(count + 1)}>증가 setCount(count - 1)}>감소 );}export default Counter; 주요 특징 1. 초기값 설정: useStat.. 2025. 1. 15. React Select with multiple option #html / css(scss) / js(Babel)#React Select with multiple option#Author : CrocoDillon https://codepen.io/CrocoDillon/pen/MpMoZe React Select with multiple optionCopyright by my client on design and chevron icons, other icons are from iconic :)...codepen.io #react #selectbox #multipleoption #html #css #scss #js #babel 2024. 11. 15. React App with React Select #html / css / js#React App with React Select#Author : Irfan Hanfi https://codepen.io/irfanhanfi/pen/EGXdOQ React App with React Select...codepen.io #react #selectbox #select #box #html #css #js #app 2024. 11. 15. React Select Box #html / css(Sass) / js(Babel)#React Select Box#Author : Brandon#select box https://codepen.io/blehr/pen/pbjNGR React Select Box...codepen.io #React #selectbox #select #box #html #css #js #sass #babel 2024. 11. 15. React modal using hooks #html / css / js#React modal using hooks#Author : Maxime Preaux#모달 / Modal / React https://codepen.io/deammer/pen/LoMBvp React modal using hooks...codepen.io 2024. 7. 19. React Dialog Modal #html / css / js(Babel)#React Dialog Modal#Mehmet Can#모달 / Modal / React https://codepen.io/m3hm3tcan/pen/yLExMbe Modal window with react-modal...codepen.io 2024. 7. 19. 이전 1 2 3 4 5 다음
