(L) Component

• React
  • component, rendering(Mounted), reconciliation, Virtual DOM
• JSX
  • JSX, Fragment, JS expression, if-statement, &&-conditional-rendering, inline-styling, className
• Element
  • element-structure
• Component
  • function-Component, class-Component
  • props, props-rendering&value(props)-setting, defaultProps, propTypes, propTypes-Required
  • state, state-setting-constructor(), setState(), immutable, state-classField-setting
• ComponentLifeCycle
  • Mount, Update, UnMount, Exception
  • constructor, static-getDerivedStateFromProps, shouldComponentUpdate, render
  • getSnapshotBeforeUpdate, componentDidMount, componentDidUpdate, componentWillUnmount
• EventHandling
  • Event Manual, bind-Function, Property-Initializer-Syntax-allowFunction, event of component trigger
• ComponentKey
  • key-setting, use not index, concat, slice, filter
• ContextAPI
• ref
  • createRef, function-component, ref-callback, forwardRef
• module

(L) ComponentStyle

• CodeStyle
• dataset
• liftingStateUp
• higher order component
• render props
• render optimization

(L) Hook

• Hooks
  • useState, useEffect, rules, useContext, useRef, useMemo, useCallback, useReducer, useImperativeHandle, useLayoutEffect
  • useOnFirstRender like constructor (customHook), usePrevious, useOnUpdate (customHook), forceUpdate (customHook), useHasMounted (customHook), useDebounce (customHook)

(L) Babel

• Babel
  • @babel/cli, babel.config.js, webpack (babel-loader), @babel/core, Babel-compile
• BabelConfig
  • extends, env, overrides
• BabelConfigFile
• BabelPolyfillEnv
  • polyfill, core-js, @babel/preset-env
• BabelCustomPlugin
  • AST, console.log-remove-plugin, console.log-add-plugin

(L) Webpack

• Webpack
• TreeShaking
• CodeSplit
• CustomLoader
• CustomPlugin

(P) reactComponent-without-webpack

• react Element
• react JSX
• babel -> JSX -> Element

(P) class Component LifeCycle

• each life method parameter
  • prevState, prevProps value check
  • this.state, this.props value check
• if return {}(object) in getDerivedStateFromProps(), no re-cycle to init step!!
  • just keep going current cycle, and nextState change.
• if just parent update state, children component work?
  • children component call cycle. => rendering(Virtual DOM), but don't work real DOM.

(P) GuGuDan-without-webpack

• GuGuDan
  • bind this
    • allow function
    • class field
• GuGuDan
  • hook
    • pure function + useState function

(P) WordRelay

• webpack.config
• ref
  • function
  • useRef

(P) NumberBaseBall

• component separate
• pureComponent
• ref
  • createRef
• state only insert values immutable
• state batch
  • if change many state using setState, you don't have that you want it result always
  • first parameter of setState function knows previous State
• mount update manage like shouldComponentUpdate
  • PureComponent
  • memo
• useMemo

(P) RSP

• async method setInterval
• life cycle (class, hook)
• Higher-Order-Component

(P) ResponseCheck

• async method like setTimeout
  • why always use clearTimeout?
    • MountUpdate!! -> if don't use the clearTimeout, queue the async WEB API method
    • so, you don't have that you want it result

(P) Higher order Component

• inner Component has props that Higher order Component return value

(P) Lotto

• useEffect look up dependency props or state

(P) TicTacToe

• reducer => async call, if sync call, use useEffect call
• useMemo => can know component

(P) MineSearch

• ContextAPI