exam: improve example code readability and structure

- Add render count display
- Convert Korean text to English
- Add spacing to separate state and actions in counter store

Author: DoK6n

examples/basic/src/components/counter.tsx

@@ -6,8 +6,10 @@ interface CountStore {
   increment: () => void
   decrement: () => void
 }
+
 const useCount = quark<CountStore>(set => ({
   count: 0,
+
   increment: () => {
     set(prev => ({ count: prev.count + 1 }))
   },
@@ -18,6 +20,7 @@ const useCount = quark<CountStore>(set => ({
 
 export function Counter() {
   const { count, increment, decrement } = useCount()
+
   return (
     <div>
       <p>Count: {count}</p>

examples/basic/src/components/render-count.tsx

@@ -13,39 +13,40 @@ const useStore = quark<State>(set => ({
   setText: text => set({ text }),
 }))
 
-// 자식 컴포넌트
+let parentRenderCount = 0
+let childRenderCount = 0
+
 export function ChildComponent() {
   const count = useStore(state => state.count)
 
-  console.log('ChildComponent 렌더링')
+  console.log('ChildComponent render count', ++childRenderCount)
 
   return (
     <div>
-      <h2>자식 컴포넌트</h2>
-      <p>카운트 값: {count}</p>
+      <h2>ChildComponent</h2>
+      <p>count: {count}</p>
     </div>
   )
 }
 
-// 부모 컴포넌트
 export function ParentComponent() {
   const { text, incrementCount, setText } = useStore(state => ({
     text: state.text,
     incrementCount: state.incrementCount,
     setText: state.setText,
   }))
 
-  console.log('ParentComponent 렌더링')
+  console.log('ParentComponent render count', ++parentRenderCount)
 
   return (
     <div>
-      <h1>부모 컴포넌트</h1>
-      <button onClick={incrementCount}>카운트 증가</button>
+      <h1>ParentComponent</h1>
+      <button onClick={incrementCount}>increment count</button>
       <input
         type='text'
         value={text}
         onChange={e => setText(e.target.value)}
-        placeholder='텍스트 입력'
+        placeholder='input text'
       />
       <ChildComponent />
     </div>