React 개념 가이드

🪝 React Hooks

useState

컴포넌트에 상태를 추가할 수 있게 해주는 Hook입니다. 상태값과 상태를 업데이트하는 함수를 반환합니다.

import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return (

Count: {count}

); }

상태관리 기본Hook

useEffect

컴포넌트에서 사이드 이펙트를 수행할 수 있게 해주는 Hook입니다. 데이터 가져오기, 구독 설정, DOM 수동 조작 등에 사용됩니다.

import { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); useEffect(() => { fetchUser(userId).then(setUser); }, [userId]); // userId가 변경될 때만 실행 return user ?

{user.name}

; }

사이드이펙트 기본Hook

useContext

React Context를 구독하고 해당 컨텍스트의 현재 값을 읽을 수 있게 해주는 Hook입니다. prop drilling을 피할 수 있습니다.

import { useContext } from 'react'; import { ThemeContext } from './ThemeContext'; function Button() { const theme = useContext(ThemeContext); return ( ); }

컨텍스트 전역상태

useRef

DOM 요소에 직접 접근하거나 렌더링 간에 값을 유지해야 할 때 사용하는 Hook입니다. .current 프로퍼티로 값에 접근합니다.

import { useRef, useEffect } from 'react'; function TextInput() { const inputRef = useRef(null); useEffect(() => { // 컴포넌트가 마운트되면 input에 포커스 inputRef.current.focus(); }, []); return ; }

DOM접근 참조

useReducer

복잡한 상태 로직을 관리할 때 useState 대신 사용할 수 있는 Hook입니다. Redux와 유사한 패턴으로 상태를 관리합니다.

import { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0 }); return (

Count: {state.count}

); }

복잡한상태 리듀서패턴

useMemo

비용이 많이 드는 계산을 메모이제이션하여 성능을 최적화하는 Hook입니다. 의존성 배열의 값이 변경될 때만 재계산됩니다.

import { useMemo } from 'react'; function ExpensiveComponent({ items }) { const expensiveValue = useMemo(() => { return items.reduce((sum, item) => sum + item.value, 0); }, [items]); // items가 변경될 때만 재계산 return

Total: {expensiveValue}

; }

메모이제이션 성능최적화

useCallback

함수를 메모이제이션하여 불필요한 리렌더링을 방지하는 Hook입니다. 자식 컴포넌트에 함수를 props로 전달할 때 유용합니다.

import { useCallback, useState } from 'react'; function Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount(c => c + 1); }, []); // 의존성이 없으므로 함수가 재생성되지 않음 return ; }

함수메모이제이션 성능최적화

Custom Hooks

재사용 가능한 로직을 추출하여 여러 컴포넌트에서 공유할 수 있는 사용자 정의 Hook입니다. 'use'로 시작하는 함수로 만듭니다.

import { useState, useEffect } from 'react'; function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { return initialValue; } }); const setValue = (value) => { try { setStoredValue(value); window.localStorage.setItem(key, JSON.stringify(value)); } catch (error) { console.error(error); } }; return [storedValue, setValue]; } // 사용 예시 function App() { const [name, setName] = useLocalStorage('name', ''); return ( setName(e.target.value)} /> ); }

커스텀훅 재사용성

🎯 Event Handling

onClick

클릭 이벤트를 처리하는 가장 기본적인 이벤트 핸들러입니다. 버튼, 링크 등의 클릭 동작을 처리할 때 사용됩니다.

function Button() { const handleClick = (event) => { event.preventDefault(); console.log('버튼이 클릭되었습니다!'); }; return ( ); }

클릭이벤트 기본이벤트

onChange

입력 필드의 값이 변경될 때 발생하는 이벤트를 처리합니다. 폼 입력을 실시간으로 추적할 때 사용됩니다.

function TextInput() { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); }; return ( ); }

입력이벤트 폼처리

onSubmit

폼이 제출될 때 발생하는 이벤트를 처리합니다. 폼 데이터를 서버로 전송하거나 유효성 검사를 수행할 때 사용됩니다.

폼제출 유효성검사

onMouseEnter/onMouseLeave

마우스가 요소에 진입하거나 떠날 때 발생하는 이벤트를 처리합니다. 호버 효과나 툴팁 표시에 사용됩니다.

function HoverCard() { const [isHovered, setIsHovered] = useState(false); return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} style={{ backgroundColor: isHovered ? '#f0f0f0' : 'white', padding: '20px', border: '1px solid #ccc' }} > {isHovered ? '마우스가 올라와 있습니다!' : '마우스를 올려보세요'}

); }

마우스이벤트 호버효과

⚡ Performance Optimization

React.memo

컴포넌트를 메모이제이션하여 props가 변경되지 않으면 리렌더링을 방지합니다. 함수형 컴포넌트의 성능을 최적화할 때 사용됩니다.

import React from 'react'; const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) { console.log('ExpensiveComponent 렌더링'); return (

{data.map(item => (

{item.name}

))}

); }); // props가 같으면 리렌더링되지 않음

컴포넌트메모이제이션 리렌더링방지

Lazy Loading

컴포넌트를 필요할 때만 로드하여 초기 번들 크기를 줄이는 기법입니다. React.lazy()와 Suspense를 함께 사용합니다.

import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return (

로딩 중...

); }

코드분할 번들최적화

Virtual Scrolling

대량의 데이터를 렌더링할 때 화면에 보이는 부분만 렌더링하여 성능을 최적화하는 기법입니다.

import { FixedSizeList as List } from 'react-window'; function VirtualizedList({ items }) { const Row = ({ index, style }) => (

{items[index].name}

); return ( {Row} ); }

가상스크롤 대용량데이터

🌐 Context & State Management

Context API

컴포넌트 트리 전체에 데이터를 제공하는 방법입니다. prop drilling 없이 깊은 컴포넌트에 데이터를 전달할 수 있습니다.

import React, { createContext, useContext, useState } from 'react'; const ThemeContext = createContext(); export function ThemeProvider({ children }) { const [theme, setTheme] = useState('light'); return ( {children} ); } export function useTheme() { const context = useContext(ThemeContext); if (!context) { throw new Error('useTheme must be used within ThemeProvider'); } return context; }

전역상태 컨텍스트

State Lifting

여러 컴포넌트가 같은 상태를 공유해야 할 때, 상태를 공통 부모 컴포넌트로 끌어올리는 패턴입니다.

function Parent() { const [sharedState, setSharedState] = useState(''); return (

); } function ChildA({ value, onChange }) { return ( onChange(e.target.value)} /> ); } function ChildB({ value }) { return

현재 값: {value}

; }

상태끌어올리기 상태공유

📝 Forms & Validation

Controlled Components

React 상태에 의해 값이 제어되는 폼 요소입니다. 입력값이 항상 React 상태와 동기화됩니다.

</form>
  );
}</div>
                        <div class="concept-tags">
                            <span class="concept-tag">제어컴포넌트</span>
                            <span class="concept-tag">폼상태관리</span>
                        </div>
                    </div>

<div class="concept-card" data-tags="form">
                        <div class="concept-name">Form Validation</div>
                        <div class="concept-description">사용자 입력의 유효성을 검사하고 오류 메시지를 표시하는 기능입니다. 실시간 검증과 제출 시 검증을 구현할 수 있습니다.</div>
                        <div class="concept-example">function ValidatedForm() {
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

const validateEmail = (email) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = {};

if (!email) {
      newErrors.email = '이메일은 필수입니다';
    } else if (!validateEmail(email)) {
      newErrors.email = '올바른 이메일 형식이 아닙니다';
    }

setErrors(newErrors);

if (Object.keys(newErrors).length === 0) {
      console.log('폼 제출 성공!');
    }
  };

return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="이메일"
      />
      {errors.email && <span style={{color: 'red'}}>{errors.email}</span>}
      <button type="submit">제출</button>
    </form>
  );
}</div>
                        <div class="concept-tags">
                            <span class="concept-tag">유효성검사</span>
                            <span class="concept-tag">에러처리</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="stats" id="stats">
            총 <span id="totalCount">0</span>개의 React 개념이 있습니다.
        </div>
    </div>

// 모든 개념 카드들
        const allCards = document.querySelectorAll('.concept-card');
        const allSections = document.querySelectorAll('.category-section');

// 활성 태그들
        let activeTags = new Set();

// 초기 카운트 설정
        updateStats();

// 검색 기능
        searchInput.addEventListener('input', filterConcepts);
        categoryFilter.addEventListener('change', filterConcepts);

// 태그 클릭 이벤트
        tagsContainer.addEventListener('click', (e) => {
            if (e.target.classList.contains('tag')) {
                const tag = e.target.dataset.tag;
                
                if (activeTags.has(tag)) {
                    activeTags.delete(tag);
                    e.target.classList.remove('active');
                } else {
                    activeTags.add(tag);
                    e.target.classList.add('active');
                }
                
                filterConcepts();
            }
        });

function filterConcepts() {
            const searchTerm = searchInput.value.toLowerCase();
            const selectedCategory = categoryFilter.value;
            
            let visibleCount = 0;

allSections.forEach(section => {
                const sectionCategory = section.dataset.category;
                let sectionHasVisibleCards = false;

// 카테고리 필터 확인
                if (selectedCategory && selectedCategory !== sectionCategory) {
                    section.classList.add('hidden');
                    return;
                }

const cards = section.querySelectorAll('.concept-card');
                cards.forEach(card => {
                    const name = card.querySelector('.concept-name').textContent.toLowerCase();
                    const description = card.querySelector('.concept-description').textContent.toLowerCase();
                    const example = card.querySelector('.concept-example').textContent.toLowerCase();
                    const cardTags = card.dataset.tags.split(' ');

// 검색어 필터
                    const matchesSearch = !searchTerm || 
                        name.includes(searchTerm) || 
                        description.includes(searchTerm) || 
                        example.includes(searchTerm);

// 태그 필터
                    const matchesTags = activeTags.size === 0 || 
                        [...activeTags].some(tag => cardTags.includes(tag));

if (matchesSearch && matchesTags) {
                        card.classList.remove('hidden');
                        sectionHasVisibleCards = true;
                        visibleCount++;
                    } else {
                        card.classList.add('hidden');
                    }
                });

// 섹션에 보이는 카드가 있으면 섹션도 보이게 함
                if (sectionHasVisibleCards) {
                    section.classList.remove('hidden');
                } else {
                    section.classList.add('hidden');
                }
            });

updateStats(visibleCount);
            showNoResults(visibleCount === 0);
        }

function updateStats(visibleCount = null) {
            const count = visibleCount !== null ? visibleCount : allCards.length;
            totalCountSpan.textContent = count;
        }

// 카드 호버 효과 개선
        allCards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-8px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0) scale(1)';
            });
        });

// 키보드 단축키
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'k') {
                e.preventDefault();
                searchInput.focus();
            }
            
            if (e.key === 'Escape') {
                searchInput.value = '';
                categoryFilter.value = '';
                activeTags.clear();
                document.querySelectorAll('.tag.active').forEach(tag => {
                    tag.classList.remove('active');
                });
                filterConcepts();
            }
        });
    </script>
</body>
</html>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9e488a04a840879c',t:'MTc3NDg4ODY0OA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>

⚛️ React 개념 가이드

🪝 React Hooks

🎯 Event Handling

⚡ Performance Optimization

🌐 Context & State Management

📝 Forms & Validation