Solid.js

import { createSignal } from 'solid-js';

// Signal: Solid.js의 반응형 상태
// getter 함수와 setter 함수를 반환 (React와 다름!)
function Counter() {
    // count는 함수! count()로 값을 읽음
    const [count, setCount] = createSignal(0);

    // 컴포넌트 함수는 한 번만 실행됨
    console.log('컴포넌트 생성 - 이 로그는 한 번만 출력!');

    return (
        <div>
            {/* count()를 호출해야 값을 읽을 수 있음 */}
            <p>카운트: {count()}</p>
            <button onClick={() => setCount(count() + 1)}>
                증가
            </button>
        </div>
    );
}

// React와의 차이점
// React: const [count, setCount] = useState(0); // count는 값
// Solid: const [count, setCount] = createSignal(0); // count는 함수

import { createSignal, createEffect, createMemo } from 'solid-js';

function UserProfile() {
    const [firstName, setFirstName] = createSignal('김');
    const [lastName, setLastName] = createSignal('철수');

    // createMemo: 파생된 값을 캐싱 (React의 useMemo와 유사)
    // firstName이나 lastName이 변경될 때만 재계산
    const fullName = createMemo(() => {
        console.log('fullName 계산 중...');
        return `${firstName()} ${lastName()}`;
    });

    // createEffect: 부수 효과 처리 (React의 useEffect와 유사)
    // 의존성 배열이 필요 없음 - 자동으로 추적!
    createEffect(() => {
        // fullName()을 사용하면 자동으로 의존성이 추적됨
        console.log(`이름이 변경됨: ${fullName()}`);
        // 정리(cleanup) 함수
        onCleanup(() => console.log('정리 작업 실행'));
    });

    return (
        <div>
            <input
                value={firstName()}
                onInput={(e) => setFirstName(e.target.value)}
            />
            <input
                value={lastName()}
                onInput={(e) => setLastName(e.target.value)}
            />
            <h2>안녕하세요, {fullName()}님!</h2>
        </div>
    );
}

import { createSignal, Show, For } from 'solid-js';

function TodoList() {
    const [todos, setTodos] = createSignal([
        { id: 1, text: 'Solid.js 배우기', done: false },
        { id: 2, text: '프로젝트에 적용하기', done: false }
    ]);
    const [showCompleted, setShowCompleted] = createSignal(true);

    const toggleTodo = (id) => {
        setTodos(todos().map(todo =>
            todo.id === id ? { ...todo, done: !todo.done } : todo
        ));
    };

    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={showCompleted()}
                    onChange={() => setShowCompleted(!showCompleted())}
                />
                완료된 항목 표시
            </label>

            {/* For: 효율적인 리스트 렌더링 (map 대신 사용) */}
            <For each={todos()}>
                {(todo) => (
                    {/* Show: 조건부 렌더링 (삼항연산자 대신 권장) */}
                    <Show when={showCompleted() || !todo.done}>
                        <div
                            style={{
                                'text-decoration': todo.done ? 'line-through' : 'none'
                            }}
                            onClick={() => toggleTodo(todo.id)}
                        >
                            {todo.text}
                        </div>
                    </Show>
                )}
            </For>
        </div>
    );
}