상태관리는 왜 중요할까?

module Main exposing (..)

-- MODEL
type alias Model = Int

init: Model
init =
	0

-- UPDATE
type Msg
	= Increment
update: Msg -> Model -> Model
update msg model =
	case msg of
		Increment ->
			model + 1

-- VIEW
view: Model -> Html Msg
view model =
	div []
		[ button [ onClick Increment ] [text "+"]]
<div>
	<button>+</button>
</div

Event 발생 -> view -> update -> model

View가 사용자가 이벤트를 트리거 -> Update가 특정 메시지를 기반으로 Model을 업데이트

type SomeContextType = {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
  text: string;
  setText: React.Dispatch<React.SetStateAction<string>>;
};

const SomeContext = React.createContext<SomeContextType | undefined>(undefined);

Context.Provider가 value를 갖고 있고, 이를 Fiber 트리상에서 이 Context를 쓰는 Consumer들이 어디에 있는지를 추적합니다.

-> Provider의 value가 바뀌면, React는 “새로운 value가 이전 value와 동일한지?”를 판단하고, 다르다면(주로 `Object.is`로 비교) 해당 Context를 구독하는 Consumer 부분(Fiber Subtree)에 이 Context가 업데이트됨을 알려줍니다.

-> 그 Consumer들은 다음 렌더 단계에서 “useContext(Context)”로 읽은 “value”가 달라진 것을 감지, 리렌더링이 필요해집니다.

{
  type: "ADD_TODO",
  payload: { text: "Learn Flux" }
}

class Dispatcher {
  constructor() {
    this._subscribedCallbacks = new Set();
  }
  register(callback) {
    this._subscribedCallbacks.add(callback);
  }
  dispatch(action) {
    for (const callback of this._subscribedCallbacks) {
      callback(action); // Action을 각 콜백으로 전달
    }
  }
}

const todoDispatcher = new Dispatcher();
todoDispatcher.register((action) => {
  switch (action.type) {
    case "ADD_TODO":
      Store.handleAction(action);
      break;
  }
});

const TodoAction = {
  addTodo: (text) =>
    todoDispatcher.dispatch({
      type: "ADD_TODO",
      payload: { text },
    }),
};

const TodoStore = {
  todos: [],
  listeners: new Set(),
  getTodos: function () {
    return this.todos;
  },
  addTodo: function (text) {
    this.todos.push({ id: Date.now(), text });
    this.emitChange();
  },
  emitChange: () => {
    for (const listener of listners) {
      listener();
    }
  },
};

// UserStore
const UserStore = {
  users: { 1: { name: "Alice", profilePicture: "alice.jpg" } },
};

// PostStore
const PostStore = {
  posts: [{ id: 1, content: "Hello, World!", authorId: 1 }],
};

// UI에서 의존성 문제 발생
function renderPost(postId) {
  const post = PostStore.posts.find((p) => p.id === postId);
  const author = UserStore.users[post.authorId]; // 의존성 증가
  console.log(`${author.name}: ${post.content}`);
}

function ContextApiProblem() {
  return (
    <SomeProvider>
           {" "}
      <div className="flex  items-center justify-center  gap-4">
               {" "}
        <div className="flex items-center justify-center flex-col">
                    <SomChildDisplay />
                    <SomeChildComponent />       {" "}
        </div>
               {" "}
        <div className="flex items-center justify-center flex-col">
                    <TextEditor />       {" "}
        </div>
             {" "}
      </div>
         {" "}
    </SomeProvider>
  );
}

function Counter1() {
  const state = get();
  function handleClick() {
    set((prev) => ({ count: prev.count + 1 }));
  }
  return (
    <div>
            <h3>Counter 1 : {state.count}</h3>     {" "}
      <button onClick={handleClick}>+</button>   {" "}
    </div>
  );
}

type State<T> = {
  get: () => T;
  set: (state: T | (prev: T) => T) => T;
  subscribe: (callback: () => void) => () => void
}

// store.ts
let state = { counte: 0 };
export const get = () => state;
export const set = (newState: State | ((prevState: State) => State)) => {
  state =
    typeof newState === "function"
      ? (newState as (prevState: State) => State)(state)
      : newState;
};