new_bird-hyun

// components/Modal.jsx import ReactDOM from 'react-dom'; export default function Modal({ children, onClose }) {   return ReactDOM.createPortal(             e.stopPropagation()}>         {children}            ,     document.getElementById('modal-root')   ); }    // 사용 예  setOpen(false)}>   모달 내용

const pairs = [['name', 'Se-hyun'], ['age', 29]]; const obj = Object.fromEntries(pairs); console.log(obj); // { name: 'Se-hyun', age: 29 }

React vs Next.js - 라우팅 비교기능React RouterNext.js라우팅 방식코드 기반 정의파일 기반 라우팅동적 라우트pages/post/[id].tsx코드 스플리팅필요 시 React.lazy자동 처리중첩 라우트명시적 nesting별도 _app.tsx와 컴포넌트 조합// React Router 예시 } /> // Next.js 예시 // pages/user/[id].tsx const { id } = useRouter().query;

const numbers = [1, 2, 3, 4, 5, 6]; const partition = (arr, predicate) =>   arr.reduce(     ([pass, fail], item) =>       predicate(item)         ? [[...pass, item], fail]         : [pass, [...fail, item]],     [[], []]   ); const [even, odd] = partition(numbers, n => n % 2 === 0); console.log('짝수:', even); // [2, 4, 6] console.log('홀수:', odd);  // [1, 3, 5]

// context/ThemeContext.jsx import { createContext, useContext, useState } from 'react'; const ThemeContext = createContext(); export function ThemeProvider({ children }) {   const [theme, setTheme] = useState('light');   const toggleTheme = () => setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));   return (            {children}        ); } export const useTheme = () => useContext(Theme..

const items = [   { id: 1, name: 'A' },   { id: 2, name: 'B' },   { id: 1, name: 'A' }, ]; const uniqueItems = Array.from(new Map(items.map(item => [item.id, item])).values()); console.log(uniqueItems); // [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]

import { useRef } from 'react'; export default function ScrollToSection() {   const sectionRef = useRef(null);   const scrollToSection = () => {     sectionRef.current?.scrollIntoView({ behavior: 'smooth' });   };   return (            섹션으로 이동                       🎯 여기가 타겟 섹션입니다!               ); }

// 특정 요소가 화면에 보일 때 콜백 실행 function observeElement(el, callback) {   const observer = new IntersectionObserver(([entry]) => {     if (entry.isIntersecting) {       callback();       observer.disconnect();     }   });   observer.observe(el); } // 사용 예 // observeElement(document.querySelector('#target'), () => console.log('보임!'));