// 초기 JavaScript 코드의 전형적인 모습
var isMenuOpen = false;
 
function toggleMenu() {
  if (isMenuOpen) {
    document.getElementById('menu').style.display = 'none';
    isMenuOpen = false;
  } else {
    document.getElementById('menu').style.display = 'block';
    isMenuOpen = true;
  }
}

// DOM에서 현재 상태를 읽어온다
function isLoggedIn() {
  return $('#user-name').text() !== '';
}
 
// DOM을 변경해서 상태를 업데이트한다
function login(userName) {
  $('#user-name').text(userName);
  $('#login-btn').hide();
  $('#logout-btn').show();
}

// 전형적인 jQuery 시대 코드
var App = {
  currentUser: null,
  cart: [],
  selectedTab: 'home',
  
  setUser: function(user) {
    this.currentUser = user;
    this.render();
  },
  
  render: function() {
    // DOM을 수동으로 업데이트
    if (this.currentUser) {
      $('#user-info').html(this.currentUser.name);
    }
  }
};

// AJAX 요청의 원형
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/posts', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var posts = JSON.parse(xhr.responseText);
    renderPosts(posts); // DOM 업데이트
  }
};
xhr.send();

// Backbone.js의 Model
var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});
 
// Backbone.js의 Collection
var TodoList = Backbone.Collection.extend({
  model: Todo,
  url: '/api/todos'
});
 
// Backbone.js의 View
var TodoView = Backbone.View.extend({
  events: {
    'click .toggle': 'toggleDone'
  },
  
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
  },
  
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  
  toggleDone: function() {
    this.model.toggle();
  }
});

// Knockout.js
function AppViewModel() {
  this.firstName = ko.observable('Bob');
  this.lastName = ko.observable('Smith');
  
  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
  }, this);
}
 
ko.applyBindings(new AppViewModel());

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="name" />
  <p>Hello, {{name}}!</p>
</div>

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.name = "World";
  });

// React의 핵심 사상
function Counter({ count }) {
  return <div>{count}</div>;
}

// 단방향 데이터 흐름
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        <button onClick={() => this.increment()}>+</button>
      </div>
    );
  }
}

// Props Drilling의 전형적인 예시
function App() {
  const [user, setUser] = useState(null);
  return <Layout user={user} setUser={setUser} />;
}
 
function Layout({ user, setUser }) {
  return <Sidebar user={user} setUser={setUser} />;
}
 
function Sidebar({ user, setUser }) {
  return <UserProfile user={user} setUser={setUser} />;
}
 
function UserProfile({ user, setUser }) {
  // 드디어 user를 사용하는 컴포넌트
  return <div>{user?.name}</div>;
}

// Flux의 개념적 구조
// 1. Action: 어떤 일이 일어났는가
const incrementAction = {
  type: 'INCREMENT',
  payload: { amount: 1 }
};
 
// 2. Dispatcher: 모든 Action의 중앙 허브
AppDispatcher.dispatch(incrementAction);
 
// 3. Store: 상태와 비즈니스 로직
class CounterStore extends EventEmitter {
  constructor() {
    super();
    this.count = 0;
    AppDispatcher.register(this.handleAction.bind(this));
  }
  
  handleAction(action) {
    if (action.type === 'INCREMENT') {
      this.count += action.payload.amount;
      this.emit('change');
    }
  }
  
  getCount() {
    return this.count;
  }
}
 
// 4. View: Store를 구독
counterStore.on('change', () => {
  setCount(counterStore.getCount());
});

// 전체 앱의 상태가 하나의 트리
const state = {
  user: { id: 1, name: 'John', isLoggedIn: true },
  posts: [...],
  ui: { sidebarOpen: false, theme: 'dark' }
};

// 직접 수정 금지
// state.user.name = 'Jane'; ← 이것은 Redux에서 금지
 
// Action을 통해서만 변경 가능
store.dispatch({ type: 'UPDATE_USER_NAME', payload: 'Jane' });

// Reducer: 이전 상태와 Action을 받아 새로운 상태를 반환하는 순수 함수
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}
 
// Store 생성
const store = createStore(counterReducer);
 
// 사용
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }

// Redux DevTools로 가능한 것들
// - 모든 Action의 이력 확인
// - 각 Action 이후 상태 스냅샷
// - 과거 상태로 되돌아가기
// - Action 재실행

// 전통적인 Redux + react-redux 패턴
const mapStateToProps = (state) => ({
  count: state.counter.count,
  user: state.user.currentUser
});
 
const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});
 
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

// 하나의 기능을 위해 필요한 코드들
 
// 1. Action Types
const FETCH_POSTS_REQUEST = 'FETCH_POSTS_REQUEST';
const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS';
const FETCH_POSTS_FAILURE = 'FETCH_POSTS_FAILURE';
 
// 2. Action Creators
const fetchPostsRequest = () => ({ type: FETCH_POSTS_REQUEST });
const fetchPostsSuccess = (posts) => ({ type: FETCH_POSTS_SUCCESS, payload: posts });
const fetchPostsFailure = (error) => ({ type: FETCH_POSTS_FAILURE, error });
 
// 3. Thunk (비동기 처리)
const fetchPosts = () => async (dispatch) => {
  dispatch(fetchPostsRequest());
  try {
    const posts = await api.getPosts();
    dispatch(fetchPostsSuccess(posts));
  } catch (error) {
    dispatch(fetchPostsFailure(error));
  }
};
 
// 4. Reducer
const initialState = { posts: [], loading: false, error: null };
function postsReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS_REQUEST:
      return { ...state, loading: true };
    case FETCH_POSTS_SUCCESS:
      return { ...state, loading: false, posts: action.payload };
    case FETCH_POSTS_FAILURE:
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
}
 
// 5. Selector
const selectPosts = (state) => state.posts.posts;
const selectPostsLoading = (state) => state.posts.loading;

// redux-thunk: 함수를 dispatch
const fetchUser = (id) => (dispatch) => {
  dispatch(fetchUserRequest());
  return fetch(`/api/users/${id}`)
    .then(r => r.json())
    .then(user => dispatch(fetchUserSuccess(user)));
};
 
// redux-saga: Generator 기반
function* fetchUserSaga(action) {
  try {
    yield put(fetchUserRequest());
    const user = yield call(api.getUser, action.id);
    yield put(fetchUserSuccess(user));
  } catch (e) {
    yield put(fetchUserFailure(e.message));
  }
}

// MobX의 접근법
import { observable, action, computed, makeObservable } from 'mobx';
 
class CounterStore {
  count = 0;
  
  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action,
      doubled: computed
    });
  }
  
  increment() {
    this.count++;
  }
  
  decrement() {
    this.count--;
  }
  
  get doubled() {
    return this.count * 2;
  }
}

// React Context API
const ThemeContext = React.createContext('light');
const UserContext = React.createContext(null);
 
function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState(null);
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <UserContext.Provider value={{ user, setUser }}>
        <MainContent />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}
 
// 어느 깊이에서든 직접 접근 가능
function UserProfile() {
  const { user } = useContext(UserContext);
  return <div>{user?.name}</div>;
}

// 성능 문제의 예시
const AppContext = createContext(null);
 
function App() {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [notifications, setNotifications] = useState([]);
  
  // 이것들을 하나의 Context에 묶으면
  // theme이 바뀔 때 user 정보만 필요한 컴포넌트도 리렌더링된다
  return (
    <AppContext.Provider value={{ user, theme, notifications, setUser, setTheme, setNotifications }}>
      <App />
    </AppContext.Provider>
  );
}

// 클래스 컴포넌트
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  
  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }
  
  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }
  
  handleClick() {
    this.setState(prev => ({ count: prev.count + 1 }));
  }
  
  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}
 
// Hooks로 변환
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// 재사용 가능한 상태 로직을 커스텀 훅으로 추출
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = useCallback(() => setCount(c => c + 1), []);
  const decrement = useCallback(() => setCount(c => c - 1), []);
  const reset = useCallback(() => setCount(initialValue), [initialValue]);
  
  return { count, increment, decrement, reset };
}
 
// 어느 컴포넌트에서든 재사용
function CounterA() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>{count}</button>;
}
 
function CounterB() {
  const { count, decrement } = useCounter(100);
  return <button onClick={decrement}>{count}</button>;
}

// useReducer: 컴포넌트 레벨의 Redux
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    default:
      return state;
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  
  return (
    <div>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
    </div>
  );
}

// Redux Toolkit의 createSlice
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
// 비동기 처리도 간결하게
const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('/api/posts');
  return response.json();
});
 
const postsSlice = createSlice({
  name: 'posts',
  initialState: { items: [], loading: false, error: null },
  reducers: {
    addPost: (state, action) => {
      // Immer가 내장되어 있어 직접 변경하는 것처럼 쓸 수 있다
      state.items.push(action.payload);
    },
    removePost: (state, action) => {
      state.items = state.items.filter(p => p.id !== action.payload);
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.items = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});
 
export const { addPost, removePost } = postsSlice.actions;
export default postsSlice.reducer;

// Zustand: 이게 전부다
import { create } from 'zustand';
 
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}));
 
// 컴포넌트에서 사용
function Counter() {
  const { count, increment, decrement } = useCounterStore();
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

// 필요한 값만 선택해서 구독
// count가 바뀔 때만 이 컴포넌트가 리렌더링된다
const count = useCounterStore((state) => state.count);
 
// user가 바뀔 때만 이 컴포넌트가 리렌더링된다
const user = useUserStore((state) => state.user);

import { atom, useAtom } from 'jotai';
 
// 원자 정의
const countAtom = atom(0);
const userAtom = atom(null);
const themeAtom = atom('light');
 
// 파생 원자 (다른 원자를 기반으로 계산)
const doubledCountAtom = atom((get) => get(countAtom) * 2);
const isLoggedInAtom = atom((get) => get(userAtom) !== null);
 
// 컴포넌트에서 사용
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubledCountAtom);
  
  return (
    <div>
      <span>{count}</span>
      <span>{doubled}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

import { proxy, useSnapshot } from 'valtio';
 
const state = proxy({
  count: 0,
  user: null,
  
  increment() {
    this.count++;
  },
  
  setUser(user) {
    this.user = user;
  }
});
 
function Counter() {
  const snap = useSnapshot(state);
  
  return (
    <div>
      <span>{snap.count}</span>
      <button onClick={state.increment}>+</button>
    </div>
  );
}

// Redux 스토어에 담긴 것들의 실체
const state = {
  posts: [],           // 서버 데이터
  users: {},           // 서버 데이터
  comments: [],        // 서버 데이터
  currentUser: null,   // 서버 데이터 (또는 인증 상태)
  
  // 이것만이 진짜 클라이언트 상태
  selectedTab: 'home',
  sidebarOpen: false,
  searchQuery: ''
};

// React Query로 서버 데이터 관리
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
function PostList() {
  // 자동 캐싱, 로딩 상태, 에러 상태, 백그라운드 갱신이 모두 포함
  const { data: posts, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json()),
    staleTime: 5 * 60 * 1000, // 5분 동안 캐시 유효
    refetchOnWindowFocus: true // 탭 전환 시 자동 갱신
  });
  
  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;
  
  return <ul>{posts.map(post => <PostItem key={post.id} post={post} />)}</ul>;
}
 
function CreatePost() {
  const queryClient = useQueryClient();
  
  const mutation = useMutation({
    mutationFn: (newPost) => fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify(newPost)
    }),
    onSuccess: () => {
      // 성공하면 posts 캐시를 무효화하여 자동으로 다시 가져옴
      queryClient.invalidateQueries({ queryKey: ['posts'] });
    }
  });
  
  return (
    <button onClick={() => mutation.mutate({ title: 'New Post' })}>
      Create Post
    </button>
  );
}

import useSWR from 'swr';
 
const fetcher = (url) => fetch(url).then(r => r.json());
 
function UserProfile({ userId }) {
  const { data: user, error, isLoading } = useSWR(
    `/api/users/${userId}`,
    fetcher
  );
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;
  
  return <div>{user.name}</div>;
}

// Apollo Client: GraphQL 쿼리와 캐싱
const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      author {
        name
      }
    }
  }
`;
 
function PostList() {
  const { loading, error, data } = useQuery(GET_POSTS);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;
  
  return data.posts.map(post => <PostCard key={post.id} post={post} />);
}

// Server Component — 데이터 패칭이 상태 관리 문제가 아니다
async function PostList() {
  // 서버에서 직접 fetch, 클라이언트 상태 불필요
  const posts = await fetch('/api/posts').then(r => r.json());
  
  return (
    <ul>
      {posts.map(post => (
        <PostItem key={post.id} post={post} />
      ))}
    </ul>
  );
}

// React 19의 use 훅
import { use } from 'react';
 
function PostDetail({ postPromise }) {
  // Promise를 직접 unwrap
  const post = use(postPromise);
  return <article>{post.title}</article>;
}

function LikeButton({ post }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    post.likes,
    (currentLikes, amount) => currentLikes + amount
  );
  
  async function handleLike() {
    addOptimisticLike(1); // 즉시 UI 업데이트
    await likePost(post.id); // 서버 요청
  }
  
  return (
    <button onClick={handleLike}>
      {optimisticLikes} Likes
    </button>
  );
}

// 폼 상태와 서버 액션의 통합
function ContactForm() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      const result = await submitContactForm(formData);
      return result;
    },
    null
  );
  
  return (
    <form action={formAction}>
      <input name="email" type="email" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Sending...' : 'Send'}
      </button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

// Preact Signals
import { signal, computed, effect } from '@preact/signals';
 
const count = signal(0);
const doubled = computed(() => count.value * 2);
 
effect(() => {
  console.log(`Count: ${count.value}, Doubled: ${doubled.value}`);
});
 
count.value = 5; // Count: 5, Doubled: 10

// SolidJS — React처럼 생겼지만 내부가 완전히 다르다
import { createSignal, createMemo } from 'solid-js';
 
function Counter() {
  const [count, setCount] = createSignal(0);
  const doubled = createMemo(() => count() * 2);
  
  return (
    <div>
      <span>{count()}</span>
      <span>{doubled()}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}