https://playcode.io/2196579 React PlaygroundTry this online React Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.playcode.io

useMemoconst avg = useMemo(() => getAverage(list), [list]); useCallbackconst 함수명 = useCallback(() => {내용}, [number]); // number 값이 바뀔 때만 함수 생성 Average.jsximport React, { useState, useMemo, useRef, useCallback } from "react";const getAverage = (numbers) => { // 평균값 계산 함수 console.log('계산중...'); if (numbers.length === 0) return 0; // 배열이 비어 있으면 0 반환 return numbers.reduce((a, b) => a + b) /..

useInput.jsximport { useReducer } from 'react'; // 다양한 컴포넌트 상황에 따라 상태를 다른 값으로 업데이트function reducer(state, action) { // 불변셩을 지키면서 업데이트한 새로운 상태를 반환 return { ...state, [action.name]: action.value, };}// 컴포넌트 사황에 따라 다양하게 적용되는 useReducer hook// useReducer 첫번째 파리미터는 리듀서 함수, 두번째 파라미터에는 기본값export default function useInputs(initialForm) { const [state, dispatch] = useReducer(reducer, initialFor..

요약기본 상태 및 생애주기 훅useState함수형 컴포넌트에서 로컬 상태를 관리합니다.useEffect함수형 컴포넌트에서 부수 효과를 처리합니다 (예: 데이터 가져오기, 구독).useContextReact 컨텍스트에서 값을 소비합니다.참조 및 DOM 훅useRef렌더링 간에 지속되는 가변 참조 객체를 생성합니다.useLayoutEffectuseEffect와 비슷하지만, DOM 변경 후 동기적으로 실행됩니다.성능 및 최적화 훅useMemo값을 메모이제이션하여 렌더링할 때 비싼 계산을 피합니다.useCallback함수가 불필요하게 새로 생성되는 것을 방지합니다.useDeferredValue값 업데이트를 지연시켜 UI 차단을 방지합니다.useTransition업데이트를 "전환"으로 표시하여 UI를 차단하지 않..

Iteration.jsximport React, { useState } from "react";import styled from "styled-components";const ListItem = styled.li` margin: 0; padding: 5px 0; user-select: none; cursor: pointer; transition: all 0.2s; &:hover { background-color: #eee; }`;const IterationSample = () => { const [names, setNames] = useState([ { id: 1, text: "눈사람" }, { id: 2, text: "얼음" }, { id: 3, text: "눈" }..

Refimport React, { useRef } from "react";...const inputEl = useRef(null); // ref 참조...inputEl.current.focus(); // ref 참조  ScrollBox.jsximport React, { useRef } from 'react';const ScrollBox = () => { const boxRef = useRef(null); // ref 참조 const scrollToBottom = () => { if (boxRef.current) { console.info(boxRef.current); const { scrollHeight, clientHeight } = boxRef.current; bo..

ValidationSample.jsximport React, { useRef, useState } from 'react';import styled from 'styled-components';const ValidationSample = () => { const inputRef = useRef(); // 참조 const [password, setPassword] = useState(''); const [clicked, setClicked] = useState(false); const [validated, setValidated] = useState(false); const handleChange = (e) => { setPassword(e.target.value); }; const han..

MyComponent.jsimport React from 'react';import PropTypes from 'prop-types';const MyComponent = ({ name, favoriteNumber, children }) => { return ( 안녕하세요, 제 이름은 {name} 입니다. children 값은 {children} 입니다. 제가 좋아하는 숫자는 {favoriteNumber}입니다. );};MyComponent.defaultProps = { name: '기본 이름',};MyComponent.propTypes = { name: PropTypes.string, favoriteNumber: PropTypes.number..

Counter.jsimport React, { useState } from "react";const Counter = () => { const [number, setNumber] = useState(0); const [fixedNumber] = useState(0); // This value remains fixed. const handleClick = () => { setNumber((prevNumber) => { const updatedNumber = prevNumber + 1; console.log("방금 setNumber가 호출되었습니다."); console.log({ number: updatedNumber }..

1. vite 로 react 프로젝트 만들기npm create vite@latest . -- --template reactnpm create vite@latest . -- --template react 2. 플러그인 + styled-components 설치npm install && npm install styled-components 3. localhost 실행npm run dev 4. main.jsximport './index.css'import App from './App.jsx'import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'createRoot(document.getElementById('root')).re..