master merge

src/App.js

@@ -1,8 +1,11 @@
 import React from 'react'
+// import Final from './tutorial/2-useEffect/final/3-useEffect-fetch-data'
+// import Final from './tutorial/6-useReducer/final'
+import Setup from './tutorial/6-useReducer/setup'
 function App() {
   return (
     <div className='container'>
-      <h2>Advanced Tutorial</h2>
+      <Setup />
     </div>
   )
 }

src/index.js

@@ -1,11 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'))

src/tutorial/1-useState/setup/4-useState-object.js

@@ -1,7 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react'
 
 const UseStateObject = () => {
-  return <h2>useState object example</h2>;
-};
+  const [person, setPerson] = useState({
+    name: 'peter',
+    age: 24,
+    message: 'random message',
+  })
+  return <h2>useState object example</h2>
+}
 
-export default UseStateObject;
+export default UseStateObject

src/tutorial/1-useState/setup/5-useState-counter.js

@@ -1,7 +1,42 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react'
 
 const UseStateCounter = () => {
-  return <h2>useState counter example</h2>;
-};
+  const [value, setValue] = useState(0)
+  const reset = () => setValue(0)
+  const complexIncrese = () => {
+    setTimeout(() => {
+      // setValue(value + 1)
+      setValue((prevState) => {
+        return prevState + 1
+      })
+    }, 2000)
+  }
 
-export default UseStateCounter;
+  return (
+    <>
+      <section style={{ margin: '4rem 0' }}>
+        <h2>regular counter</h2>
+        <h1>{value}</h1>
+        <button className='btn' onClick={() => setValue(value - 1)}>
+          decrease
+        </button>
+        <button className='btn' onClick={reset}>
+          reset
+        </button>
+        <button className='btn' onClick={() => setValue(value + 1)}>
+          increse
+        </button>
+      </section>
+
+      <section style={{ margin: '4rem 0' }}>
+        <h2>more complex counter</h2>
+        <h1>{value}</h1>
+        <button className='btn' onClick={complexIncrese}>
+          increase later
+        </button>
+      </section>
+    </>
+  )
+}
+
+export default UseStateCounter

src/tutorial/2-useEffect/setup/1-useEffect-basics.js

@@ -1,9 +1,32 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react'
 // by default runs after every re-render
 // cleanup function
 // second parameter
 const UseEffectBasics = () => {
-  return <h2>useEffect Basics</h2>;
-};
+  const [value, setValue] = useState(0)
 
-export default UseEffectBasics;
+  useEffect(() => {
+    console.log('call useEffect')
+    if (value > 1) {
+      document.title = `New Messages(${value})`
+    }
+  }, [value])
+
+  console.log('render Component')
+
+  return (
+    <>
+      <h1>{value}</h1>
+      <button
+        className='btn'
+        onClick={() => {
+          setValue(value + 1)
+        }}
+      >
+        Click me
+      </button>
+    </>
+  )
+}
+
+export default UseEffectBasics

src/tutorial/2-useEffect/setup/3-useEffect-fetch-data.js

@@ -1,9 +1,49 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react'
 
-const url = 'https://api.github.com/users';
+const url = 'http://211.255.17.229:9090/kr/api/books?pageNum=1&pageSize=10'
 
 const UseEffectFetchData = () => {
-  return <h2>fetch data</h2>;
-};
+  const [users, setUsers] = useState([])
 
-export default UseEffectFetchData;
+  const getUsers = async () => {
+    const response = await fetch(url)
+    const users = await response.json()
+    setUsers(users.data.list)
+    console.log(users)
+  }
+
+  useEffect(() => {
+    getUsers()
+  }, [])
+
+  return (
+    <>
+      <h3>github users</h3>
+      <ul className='users'>
+        {/* {users.map((user) => {
+          const [bookId, bookTitle] = user
+          return (
+            <li key={bookId}>
+              <div>
+                <h4>{bookTitle}</h4>
+              </div>
+            </li>
+          )
+        })} */}
+
+        {users.map((user) => {
+          const { bookId, bookTitle } = user
+          return (
+            <li key={bookId}>
+              <div>
+                <h4>{bookTitle}</h4>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </>
+  )
+}
+
+export default UseEffectFetchData

src/tutorial/3-conditional-rendering/setup/1-multiple-returns.js

@@ -1,7 +1,54 @@
-import React, { useState, useEffect } from 'react';
-const url = 'https://api.github.com/users/QuincyLarson';
+import React, { useState, useEffect } from 'react'
+import { useReducer } from 'react'
+const url = 'https://api.github.com/users/QuincyLarsons'
 const MultipleReturns = () => {
-  return <h2>multiple returns</h2>;
-};
+  const [isLoading, setIsLoading] = useState(true)
+  const [isError, setIsError] = useState(false)
+  const [user, setUser] = useState('default user')
 
-export default MultipleReturns;
+  useEffect(() => {
+    //setIsLoading(true)
+    fetch(url)
+      .then((rep) => {
+        if (rep.status >= 200 && rep.status <= 299) {
+          return rep.json()
+        } else {
+          setIsLoading(false)
+          setIsError(true)
+          throw new Error(rep.statusText)
+        }
+      })
+      .then((user) => {
+        const { login } = user
+        setUser(login)
+        setIsLoading(false)
+      })
+      .catch((error) => {
+        //Not working in network error
+        setIsError(true)
+      })
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div>
+        <h1>Loading ... </h1>
+      </div>
+    )
+  }
+  if (isError) {
+    return (
+      <div>
+        <h1>Error ...</h1>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <h1>{user}</h1>
+    </div>
+  )
+}
+
+export default MultipleReturns

src/tutorial/3-conditional-rendering/setup/2-short-circuit.js

@@ -1,12 +1,26 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react'
 // short-circuit evaluation
 // ternary operator
 
 const ShortCircuit = () => {
-  // const firstValue = text || 'hello world';
-  // const secondValue = text && 'hello world';
+  const [text, setText] = useState('test')
+  const [isError, setIsError] = useState(false)
+  // const firstValue = text || 'hello world'
+  // const secondValue = text && 'hello world'
 
-  return <h2>short circuit</h2>;
-};
+  return (
+    <>
+      {/* <h1>{firstValue}</h1>
+      <h1>value : {secondValue}</h1> */}
+      {/* {if(){console.log("hello world")}} */}
+      <h3>{text || 'john doe'}</h3>
+      <button className='btn' onClick={() => setIsError(!isError)}>
+        {' '}
+        toggle error
+      </button>
+      {isError && <h1>Error...</h1>}
+    </>
+  )
+}
 
-export default ShortCircuit;
+export default ShortCircuit

src/tutorial/3-conditional-rendering/setup/3-show-hide.js

@@ -1,7 +1,42 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react'
 
 const ShowHide = () => {
-  return <h2>show/hide</h2>;
-};
+  const [show, setShow] = useState(false)
+  return (
+    <>
+      <button
+        className='btn'
+        onClick={() => {
+          setShow(!show)
+        }}
+      >
+        show/hide
+      </button>
+      {show && <Item />}
+    </>
+  )
+}
 
-export default ShowHide;
+const Item = () => {
+  const [size, setSize] = useState(window.innerWidth)
+
+  const checkSize = () => {
+    setSize(window.innerWidth)
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', checkSize)
+    // return () => {
+    //   window.removeEventListener('resize', checkSize)
+    // }
+  }, [])
+
+  return (
+    <div style={{ marginTop: '2rem' }}>
+      <h1>window</h1>
+      <h2>size : {size}</h2>
+    </div>
+  )
+}
+
+export default ShowHide