Store, State, Props 한번에 이해하기

'use client'

import {useStore} from "@/store/Memo";
import {useState} from "react";

export default function ZustandPage() {
    const {storeCnt, inc, consoleOpen} = useStore();
    const [stateCnt, setStateCnt] = useState(0);

    const handleStateCnt = () => {
        setStateCnt(stateCnt + 1)
    }

    const handleStateConsole = () => console.log("state console open")

    return (
        <div className="flex flex-col justify-start">
            <div className="">
                <span>storeCnt 값 : {storeCnt}</span>
                <button className="ml-5 border-2 bg-primary hover:bg-secondary-100" onClick={inc}>store count up
                </button>
                <button className="ml-5 border-2 bg-primary hover:bg-secondary-100" onClick={consoleOpen}>store console
                </button>
            </div>
            <div className="">
                <span>stateCnt 값 : {stateCnt}</span>
                <button className="ml-5 border-2 bg-primary hover:bg-secondary-100" onClick={handleStateCnt}>stateCnt
                    count up
                </button>
                <button className="ml-5 border-2 bg-primary hover:bg-secondary-100" onClick={handleStateConsole}>state console
                </button>
            </div>

            <div className="">
                <Result stateCnt={stateCnt} handleStateCnt={handleStateCnt} handleStateConsole={handleStateConsole} />
            </div>


        </div>
    );
}

function Result(props: any) {
    const {storeCnt,inc , consoleOpen} = useStore();
    return (
        <div className="p-5 border-4">
            <div className="">
                <span>자식 페이지</span><br/>
                <span>storeCnt 값 : {storeCnt}</span>
                <button className="ml-5 border-2 bg-primary hover:bg-secondary-100" onClick={inc}>store count up
                </button>
                <button className="ml-5 border-2 bg-primary hover:bg-secondary-100" onClick={consoleOpen}>store console
                </button>
            </div>
            <div className=" ">
                <span>stateCnt 값 : {props.stateCnt}</span>
                <button className="ml-5 border-2 bg-primary hover:bg-secondary-100" onClick={props.handleStateCnt}>stateCnt
                    count up
                </button>
                <button className="ml-5 border-2 bg-primary hover:bg-secondary-100" onClick={props.handleStateConsole}>state
                    console
                </button>
            </div>
        </div>
    );
}

state와 store를 생성 자식에게 전달하는 과정