리액트 정리 - Hooks

import React, { useState } from "react"

function Counter() {
  const [number, setNumber] = useState(0)

  const onIncrease = () => {
    setNumber((prevNumber) => prevNumber + 1)
  }

  const onDecrease = () => {
    setNumber((prevNumber) => prevNumber - 1)
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  )
}

export default Counter

useEffect(() => {
  console.log("state바뀔때마다 실행할꼬당~~~")
}, [state])

다른예시)
import React, { useState, useEffect } from "react";

export default function MyComponent() {
  const [count, setCount] = useState(0);
  const [anotherCount, setAnotherCount] = useState(0);
  useEffect(() => {
    console.log("useEffect 실행");
    document.title = `업데이트 횟수 : ${count}`;
  }, [count]);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count 더하기</button>
      <button onClick={() => setAnotherCount(anotherCount + 1)}>
        anotherCount 더하기
      </button>
    </div>
  );
}

useEffect(() => {
  document.title = `You clicked ${count} times`
}, [count === 5]) // count가 5일 때만 effect를 재실행합니다.

import React, { useEffect } from "react"
import Router from "next/router"

useEffect(() => {
  if (me) {
    alert("로그인이 되어 메인 페이지로 이동합니다.")
    Router.push("/") // id가 생기면 signup 페이지에서 메인 페이지로 이동
  }
}, [me && me.id]) // JavaScript에서 객체는 undefined일 수 있으니,
// `me` 값이 확실히 존재하는 지 판단하기 위해 `&& me.id`를 붙여 guard를 해주어야 합니다.

useEffect(() => {
  console.log("마운트할때만 실행할거얌~~")
}, [])

import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"
import axios from "axios"

function App() {
  // Store the users in a state variable.
  // We are passing an empty array as the default value.
  let [users, setUsers] = useState([])

  // The useEffect() hook fires any time that the component is rendered.
  // An empty array is passed as the second argument so that the effect only fires once.
  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => setUsers(response.data))
  }, [])

  return (
    <div className="App">
      <h2>The JSON below is loaded from an external API!</h2>
      <code>{JSON.stringify(users)}</code>
    </div>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

useEffect(() => {
  console.log("렌더링 할때마다 실행할꼬당~~~")
})

import React, { useState, useEffect } from "react"

export default function MyComponent() {
  const [count, setCount] = useState(0)
  const [anotherCount, setAnotherCount] = useState(0)
  useEffect(() => {
    console.log("useEffect 실행")
    document.title = `업데이트 횟수 : ${count}`
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count 더하기</button>
      <button onClick={() => setAnotherCount(anotherCount + 1)}>
        anotherCount 더하기
      </button>
    </div>
  )
}

import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"
import axios from "axios"

function App() {
  // Store the users in a state variable.
  // We are passing an empty array as the default value.
  let [users, setUsers] = useState([])

  // The useEffect() hook fires any time that the component is rendered.
  // An empty array is passed as the second argument so that the effect only fires once.
  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => setUsers(response.data))
  })

  return (
    <div className="App">
      <h2>The JSON below is loaded from an external API!</h2>
      <code>{JSON.stringify(users)}</code>
    </div>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

useEffect(() => {
  return () => {
    console.log("나는 정리하는 역할이야암")
  }
}, [])

import React, { useState } from "react"
import UseMemoChild from "./UseMemoChild"
import JustChild from "./JustChild"
import "./usememo.css"

export default function UseMemoParent() {
  const [count, setCount] = useState(0)
  const [anotherCount, setAnotherCount] = useState(0)

  return (
    <div style={{ border: "1px solid black" }}>
      <button onClick={() => setCount(count + 1)}>count 더하기</button>
      <button onClick={() => setAnotherCount(anotherCount + 1)}>
        anotherCount 더하기
      </button>
      <UseMemoChild anotherCount={anotherCount} />
      <JustChild count={count} />
    </div>
  )
}

import React, { useMemo } from "react"

export default function UseMemoChild({ anotherCount }) {
  return useMemo(() => {
    console.log("ReactMemoChild:뀨잉")
    return (
      <div style={{ border: "1px solid red" }}>
        React.Memo사용!!!! anotherCount를 props로 받은child : {anotherCount}
      </div>
    )
  }, [anotherCount])
}

import React from "react"

export default function JustChild({ count }) {
  console.log("JustChild: 뀨")
  return (
    <div style={{ border: "1px solid red" }}>
      count를 props로 받은child : {count}
    </div>
  )
}

import React from "react"

export default React.memo(function UseMemoChild({ anotherCount }) {
  console.log("ReactMemoChild:뀨잉")
  return (
    <div style={{ border: "1px solid red" }}>
      React.Memo사용!!!! anotherCount를 props로 받은child : {anotherCount}
    </div>
  )
}) // react.Memo를 써도 동일함

import React, { useCallback, useState } from "react"

export default function UseCallback() {
  const [count, setCount] = useState(0)
  const [anotherCount, setAnotherCount] = useState(0)
  const handleClick1 = useCallback(
    () =>
      console.log(
        "handleClick1:",
        "count:",
        count,
        "anotherCount:",
        anotherCount
      ),
    []
  )
  const handleClick2 = useCallback(
    () =>
      console.log(
        "handleClick2:",
        "count:",
        count,
        "anotherCount:",
        anotherCount
      ),
    [count]
  )
  const handleClick3 = () =>
    console.log("handleClick3:", "count:", count, "anotherCount:", anotherCount)

  return (
    <>
      <button onClick={() => setCount(count + 1)}>count{count}</button>
      <button onClick={() => setAnotherCount(anotherCount + 1)}>
        anotherCount{anotherCount}
      </button>
      <button onClick={handleClick1}>handleClick1</button>
      <button onClick={handleClick2}>handleClick2</button>
      <button onClick={handleClick3}>handleClick3</button>
    </>
  )
}

  return (
    <>
      <button onClick={() => setCount(count + 1)}>count{count}</button>
      <button onClick={() => setAnotherCount(anotherCount + 1)}>
        anotherCount{anotherCount}
      </button>
      <button onClick={handleClick1}>handleClick1</button>
      <button onClick={handleClick2}>handleClick2</button>
      <button onClick={handleClick3}>handleClick3</button>
    </>
  );
}

import React, { useReducer } from "react"

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
}

export default function UseReducerTest() {
  const [number, dispatch] = useReducer(reducer, 0)

  const onIncrease = () => {
    dispatch({ type: "INCREMENT" })
  }

  const onDecrease = () => {
    dispatch({ type: "DECREMENT" })
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  )
}

import { IoMdSettings } from "@react-icons/all-files/io/ioMdSettings"
import styled from "styled-components"
import { Props } from "./interface"
import { Meteor } from "meteor/meteor"

function Settings({ reloadHandler, reloadCancelHandler }) {
  const [password, setPassword] = useState("")
  const [guide, setGuide] = useState("default")
  const [popup, setPopup] = useState(false)
  const [showButton, setShowButton] = useState(false)
  const [checker, setChecker] = useState(false)

  const popupHandler = () => {
    setPopup(!popup)
    setShowButton(false)
    setGuide("default")
    setPassword("")
    setChecker(false)
  }

  const inputHandler = (e: KeyboardEvent<HTMLInputElement>) => {
    e.key === "Enter"
      ? passwordChecker()
      : e.key === "Escape"
      ? popupHandler()
      : setPassword(e.target.value)
  }

  const passwordChecker = async () => {
    let comparison = new Promise((res, rej) => {
      Meteor.call("envVariable", password, (error, result) => {
        res(result)
      })
    })
    let waiting = await comparison
    if (waiting) {
      setPassword("")
      setShowButton(true)
      setGuide("default")
      setChecker(false)
    } else {
      setPassword("")
      setGuide("wrong")
    }
  }

  window.addEventListener("keyup", function (e) {
    popup && e.key === "Escape" ? popupHandler() : null
  })

  return (
    <SettingContainer>
      <SettingContents
        isActive={popup}
        onKeyUp={(e) => {
          e.key == "Escape" ? popupHandler() : null
        }}
      >
        <Pass isActive={showButton}>
          <P isActive={guide === "default"}>
            {guide === "default" ? "PASSWORD" : "WRONG PASSWORD"}
          </P>
          <input
            type={"password"}
            maxLength={4}
            value={password}
            onChange={(e) => {
              setPassword(e.target.value)
            }}
            onKeyUp={(e) => inputHandler(e)}
          />
          <button
            onClick={() => {
              passwordChecker()
            }}
          >
            OK
          </button>
        </Pass>
        <ReloadDiv isActive={showButton}>
          <ReloadButton
            onClick={() => {
              reloadHandler()
            }}
          >
            재업로드
          </ReloadButton>
          <ReloadButton
            onClick={() => {
              reloadCancelHandler()
            }}
          >
            재업로드 취소
          </ReloadButton>
        </ReloadDiv>
      </SettingContents>
      <IconBox>
        <IoMdSettings
          fill={"#919191"}
          size={"1.5em"}
          onClick={() => popupHandler()}
        />
      </IconBox>
    </SettingContainer>
  )
}
export default Settings

import React, { useReducer, useState } from "react"
import { IoMdSettings } from "@react-icons/all-files/io/ioMdSettings"
import styled from "styled-components"
import { Props } from "./interface"
import { Meteor } from "meteor/meteor"

const initialSettingState = {
  password: "",
  guide: "default",
  popup: false,
  showButton: false,
  checker: false,
}

const reducer = (state, action) => {
  switch (action.type) {
    case "CLOSEPOPUP":
      return {
        popup: false,
        showButton: false,
        guide: "default",
        password: "",
        checker: false,
      }
    case "OPENPOPUP":
      return { ...state, popup: true }
    case "WRONGPASSWORD":
      return { ...state, password: "", guide: "wrong" }
    case "INPUT":
      return { ...state, password: action.password }
    case "CORRECTPASSWORD":
      return {
        ...state,
        password: "",
        showButton: true,
        guide: "default",
        checker: false,
      }
    default:
      return state
  }
}

function Settings({ reloadHandler, reloadCancelHandler }) {
  const [settingState, dispatch] = useReducer(reducer, initialSettingState)
  const { popup, showButton, password, guide } = settingState
  const onOpen = () => {
    dispatch({ type: "OPENPOPUP" })
  }
  const onClose = () => {
    dispatch({ type: "CLOSEPOPUP" })
  }
  const onInput = (password) => {
    dispatch({ type: "INPUT", password: password })
  }
  const onEnter = (e) => {
    e.key === "Enter"
      ? onCheck()
      : e.key === "Escape"
      ? onClose()
      : onInput(e.target.value)
  }
  const onCheck = async () => {
    let comparison = new Promise((res, rej) => {
      Meteor.call("envVariable", password, (error, result) => {
        res(result)
      })
    })
    let waiting = await comparison
    if (waiting) {
      dispatch({ type: "CORRECTPASSWORD" })
    } else {
      dispatch({ type: "WORNGPASSWORD" })
    }
  }
  window.addEventListener("keyup", function (e) {
    popup && e.key === "Escape" ? onClose() : null
  })
  return (
    <SettingContainer>
      <SettingContents
        isActive={popup}
        onKeyUp={(e) => {
          e.key == "Escape" ? onClose() : null
        }}
      >
        <Pass isActive={showButton}>
          <P isActive={guide === "default"}>
            {guide === "default" ? "PASSWORD" : "WRONG PASSWORD"}
          </P>
          <input
            type={"password"}
            maxLength={4}
            value={password}
            onChange={(e) => {
              onInput(e.target.value)
            }}
            onKeyUp={onEnter}
          />
          <button onClick={onCheck}>OK</button>
        </Pass>
        <ReloadDiv isActive={showButton}>
          <ReloadButton
            onClick={() => {
              reloadHandler()
            }}
          >
            재업로드
          </ReloadButton>
          <ReloadButton
            onClick={() => {
              reloadCancelHandler()
            }}
          >
            재업로드 취소
          </ReloadButton>
        </ReloadDiv>
      </SettingContents>
      <IconBox>
        <IoMdSettings fill={"#919191"} size={"1.5em"} onClick={onOpen} />
      </IconBox>
    </SettingContainer>
  )
}
export default Settings

function useState(initialValue) {
  var _val = initialValue
  function state() {
    return _val
  }
  function setState(newVal) {
    _val = newVal // _val를 노출하지 않고 _val를 변경합니다.
  }
  return [state, setState] // 외부에서 사용하기 위해 함수들을 노출
}

==============================================================================

var [foo, setFoo] = useState(0) // 배열 구조분해 사용
console.log(foo()) // 0 출력 - 위에서 넘긴 initialValue
setFoo(1) // useState의 스코프 내부에 있는 _val를 변경합니다.
console.log(foo()) // 1 출력 - 동일한 호출하지만 새로운 initialValue

function useState(initVal) {
  let _val = initValue
  const state = _val
  const setState = (newVal) => {
    _val = newVal
  }
  return [state, setState]
}
const [count, setCount] = useState(1)
console.log(count) // 1
setCount(2)
console.log(count) // 1 (????????????)

const React = (() => {
  let value

  const useState = (initialValue) => {
    const state = value || initialValue
    // !!!React의 매 실행마다 새로 할당됩니다.!!!
    // useState가 선언될 당시 value가 맨 상위에 있었죠 이것도 클로저입니다.
    const setState = (newState) => {
      value = newState
    }
    return [state, setState]
  }

  const render = (ReactComponent) => {
    const renderedComponent = ReactComponent()
    renderedComponent.render()
    return renderedComponent
  }

  return { useState, render }
})()

const React = (() => {
  let value;
  const useState = (initialValue) => {
    const state = value || initialValue;
    const setState = (newState) => {
      value = newState;
    };

    return [state, setState]; //리턴
  };

  const render = (ReactComponent) => {
    const renderedComponent = ReactComponent();
    renderedComponent.render();
    return renderedComponent; //리턴
  };

  return { useState, render }; //또 리턴
})();

function Counter() {
  const [count, setCount] = React.useState(0)
  return {
    click: () => setCount(count + 1),
    render: () => console.log('render:', { count }),
  }
}
============================================================================
let App
App = React.render(Counter)
// render: { count: 0 }
App.click()
App = React.render(Counter)
// render: { count: 1 }

function Component() {
  const [count, setCount] = React.useState(1)
  const [text, setText] = React.useState("apple")
  return {
    render: () => console.log({ count, text }),
    click: () => setCount(count + 1),
    type: (word) => setText(word),
  }
}
var App = React.render(Component) // {count: 1, text: 'apple'}
App.click()
var App = React.render(Component) // {count: 2, text: 2}
App.type("banana")
var App = React.render(Component) // {count: 'banana', text: 'banana'}

const React = (function () {
  let hooks = []
  let idx = 0
  function useState(initVal) {
    const state = hooks[idx] || initVal
    const _idx = idx // 이 훅이 사용해야 하는 인덱스를 가둬둔다.
    const setState = (newVal) => {
      hooks[_idx] = newVal
    }
    idx++ // 다음 훅은 다른 인덱스를 사용하도록 한다.
    return [state, setState]
  }
  function render(Component) {
    idx = 0 // 랜더링 시 훅의 인덱스를 초기화한다.
    const C = Component()
    C.render()
    return C
  }
  return { useState, render }
})()