모던 리액트 3장

/src/React.js
import {
  createElement as createElementProd,
  createFactory as createFactoryProd,
  cloneElement as cloneElementProd,
  isValidElement,
} from './ReactElement';
import {createContext} from './ReactContext';
import {lazy} from './ReactLazy';
import {forwardRef} from './ReactForwardRef';
import {memo} from './ReactMemo';
import {cache} from './ReactCache';
import {postpone} from './ReactPostpone';
import {
  getCacheSignal,
  getCacheForType,
  useCallback,
  useContext,
  useEffect,
  useEffectEvent,
  useImperativeHandle,
  useDebugValue,
  useInsertionEffect,
  useLayoutEffect,
  useMemo,
  useSyncExternalStore,
  useReducer,
  useRef,
  useState,
  useTransition,
  useDeferredValue,
  useId,
  useCacheRefresh,
  use,
  useMemoCache,
  useOptimistic,
} from './ReactHooks';

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  if (__DEV__) {
    if (dispatcher === null) {
      console.error(
        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
          ' one of the following reasons:\n' +
          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
          '2. You might be breaking the Rules of Hooks\n' +
          '3. You might have more than one copy of React in the same app\n' +
          'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
      );
    }
  }
  // Will result in a null access error if accessed outside render phase. We
  // intentionally don't throw our own error because this is in a hot path.
  // Also helps ensure this is inlined.
  return ((dispatcher: any): Dispatcher);
}

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';

/**
 * Keeps track of the current dispatcher.
 */
const ReactCurrentDispatcher = {
  current: (null: null | Dispatcher),
};

export default ReactCurrentDispatcher;

//ReactSharedInternal.js
/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import ReactCurrentDispatcher from './ReactCurrentDispatcher';
import ReactCurrentCache from './ReactCurrentCache';
import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
import ReactCurrentActQueue from './ReactCurrentActQueue';
import ReactCurrentOwner from './ReactCurrentOwner';
import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
import {enableServerContext} from 'shared/ReactFeatureFlags';
import {ContextRegistry} from './ReactServerContextRegistry';

const ReactSharedInternals = {
  //현재 활성화된 훅 디스패처
  ReactCurrentDispatcher,
  ReactCurrentCache,
  ReactCurrentBatchConfig,
  ReactCurrentOwner,
};

if (__DEV__) {
  ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame;
  ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue;
}

if (enableServerContext) {
  ReactSharedInternals.ContextRegistry = ContextRegistry;
}

export default ReactSharedInternals;

shared -> ReactSharedInternals.js
/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

const ReactSharedInternals =
  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

export default ReactSharedInternals;

import {useState} from 'react'

//초기값을 넘겨주지 않으면 undefined
const [state,setState] = useState(initalState)

function Component() {
    let state = 'hello'

    function handleClickButton() {
        state = 'hi'
    }

    return (
        <>
          <h1>{state}</h1>
          <button onClick = {handleClickButton}>hi</button>
        </>
    )
}

function Component() {
    const [,triggerRender] = useState()
    let state = 'hello'

    function handleButtonClick() {
        state = 'hi'
        triggerRender()
    }

    return (
        <>  
          <h1>{state}</h1>
          <button onClick = {handleButtonClick}>hi</button>
        </>
    )
}

function useState(initalState) {
    let initalState = initalState

    function setState(newState) {
        initalState = newState
    }

    return [initalState,setState]
}

function useState(initalState) {
    let initalState = initalState

    function state() {
        return initalState
    }

    function setState(newState) {
        initalState = newState
    }

    return [initalState,setState]
}

const [state,setState] = useState(0)
setState(1)

console.log(state())

const MyReact = function() {
    const global = {}
    let index = 0

    function useState(initalState) {
        //애플리케이션의 전체 state관리용
        if(!global.states) {
            global.states = []
        }

        //states 정보 조회 -> 현재 상태 값이 없다면 초기 값으로
        const currentState = global.states[index] ?? initalState
        //states의 값을 갱신
        global.states[index] = currentState

        //setter함수
        const setState = (function() {
            //클로저를 통해 즉시 실행 함수의 문맥으로 index가둔다. index를 계속 참조한다.
            let currentIndex = index
            return function(value) {
                global.states[currentIndex] = value
            }
        }())

        //하나의 state마다 index를 할당하고 그 index가 global.states를 가리킨다.
        index = index + 1

        return [currentState,setState]
    }

}

// 함수를 실행해 값을 반환한다.
const [count,setCount] = useState(() => 
    Number.parseInt(window.localStorage.getItem(cacheKey))
)

//매번 리렌더링 될떄마다(setState가 호출될때마다 localStorage를 읽는다.)
const Counter = () => {
    const initalState = Number.parseInt(window.localStorage.getItem(key))
    const [count,setCount] = useState(initalState)
}


//딱 초기화 할 때 한번만 호출된다.

const Counter = () => {
    const [count,setCount] = useState(() => 0)
}

function Component() {
    const [count,setCount] = useState(0)

    useEffect(() => {
        console.log(count)   
    })
    function handleClick() {
        setCount((prev) => prev + 1)
    }

    return (
        <>
          <h1>{count}</h1>
          <button onClick = {handleClcik}>++</button>
        </>
    )
}

import {useState,useEffect} from 'react'

export default function App() {
    const [counter, setCounter] = useState(0)

    function handleClick() {
        setCounter((prev) => prev + 1)
    }

    useEffect(() => {
        function addMouseEvent() {
            console.log(counter)
        }  
        
        window.addEventListener('click',addMouseEvent)

        //클린업 함수
        return () => {
            console.log('클린업 함수 실행!',counter)
            window.removeEventListener('click',addMouseEvent)
        }
    },[counter])

    return (
        <>
          <h1>{counter}</h1>
          <button onClick = {handleClick}>++</button>
        </>
    )
}

//클린업 함수 실행 ! 0
//1

//클린업 함수 실행 ! 1
//2

useEffect(() => {
    function addMouseEvent() {
        console.log(0)
    }

    window.addEventListener('click',addMouseEvent)

    //클린업 함수
    //다음 렌더링이 끝나고 실행된다.

    return () => {
        console.log(0)
        window.removeEventListener('click',addMouseEvent)
    }
},[count])

//그 이후 실행
useEffect(() => {
    function addMouseEvent() {
        console.log(1)
    }

    window.addEventListener('click',addMouseEvent)

    //클린업 함수
    //다음 렌더링이 끝나고 실행된다.

    return () => {
        console.log(1)
        window.removeEventListener('click',addMouseEvent)
    }
},[count])

useEffect(() => {
    console.log('컴포넌트 렌더링됨!')   
})

function Component() {
  console.log('foo')
}

function Component() {
  useEffect(() => {
    console.log('bar')
  })
}

function Component({log} : {log:string}) {
    useEffect(() => {
        logging(log)
    },[])
}

//컴포넌트의 props를 기준으로 컴포넌트 자체를 기억해버린다!

function ExpensiveComponent({value}) {
    useEffect(() => {
        console.log('렌더링')
    })
    return <span>{value}</span>
}

function App() {
 const memoComponent = useMemo(() => <ExpensiveComponent value = {value} />,[value])   

 return (
    <div>
        {memoComponent}
    </div>
 )
}

const ChildComponent = memo(({ name , value , onChange})) => {
    useEffect(() => {
        console.log('렌더링!',name)
    })

    return (
        <>
          <h1>{name} {value ? '켜짐' ? '꺼짐'}</h1>
          <button onClick = {onChange}>toggle</button>
        </>
    )
}

function App() {
    const [state1,setState1] = useState(false)
    const [state2,setState2] = useState(false)

    const toggle1 = () => {
        setState1(!state1)
    }

    const toggle2 = () => {
        setState2(!state2)
    }

    return (
        <>
          <ChildComponent name = "1" value = {state1} onChange = {toggle1} />
          <ChildComponent name = "2" value = {state2} onChange = {toggle2} />
        </>
    )
}

//상태값이 변경될 때만 함수가 재생성되고, 그 외에는 이전에 메모리에 저장한 함수를 재사용

//ChildComponent는 자신에게 전달된 onChange 함수가 변경되지 않는 한 불필요한 렌더링을 방지하게 된다.

function App() {
    const [state1,setState1] = useState(false)
    const [state2,setState2] = useState(false)

    const toggle1 = useCallback(() => {
        setState1(!state1)
    }, [state1])

    const toggle2 = useCallback(() => {
        setState2(!state2)
    }, [state2])

    return (
        <>
          <ChildComponent name = "1" value = {state1} onChange = {toggle1} />
          <ChildComponent name = "2" value = {state2} onChange = {toggle2} />
        </>
    )
}

 let value = 0
  function Component() {
    return <>{value}</>
  }

export function useRef(initalValue) {
    currentHook = 5
    return useMemo(() => {current : initalValue} , [])
}

function useMyContext() {
    const context = useContext(myContext)
    if(context === undefined){
        throw new Error(
            'Context Error!'
        )
    }
}

setShoppingCart((prevShoppingCart) => {
    const updatedItems = [...prevShoppingCard.items];

    const existingCartItemIndex = updatedItems.findIndex((cardItem) => cartItem.id === id)

    if(existingCardItem){
        ...// 복잡한 
    }
    else{
        ...//
    }
})

const [state,dispatch] = useReducer(StateReducer);

//리듀서 함수는 2개의 인수를 받는다. (상태와 액션)
function StateReducer(state, action) {
    //업데이트 된 상태를 반환한다.
    return state
}

export function useState(initalState) {
    currentHook = 1
    return useReducer(invokeOrReturn,initalState)
}

function reducer(prevState,newState) {
    return typeof newState === 'function' ? newState(prevState) : newState
} 

function init(initArg: Initalizer) {
    return typeof initArg === 'function' ? initArg() : initArg
}

const ChildComponent = forwardRef((props,ref) => {
    useEffect(() => {
      console.log(ref)
    },[ref])

    return <div>안녕</div>
})

const ParentComponent = () => {
    const inputRef = useRef()

    return (
    <input ref = {inputRef} />
    <ChildComponent ref = {inputRef} />
    
    )
}

function App(){
    const [count,setCount] = useState(0)

    useEffect(() => {
        console.log('useEffect' + count)
    },[count])

    useLayoutEffect(() => {
        console.log('useLayoutEffect' + count)
    },[count])

    function handleClick() {
        setCount((prev) => prev + 1)
    }

    return (
        <>
          <h1>{count}</h1>
          <button onClick = {handleClick}>+</button>
        </>
    )
}

function Component() {
    const [count,setCount] = useState(0)
    const [required,setRequired] = useState(false)

    useEffect(() => {

    },[count,required])
}

{
    memorizedState:0,
    baseState:0,
    queue:{..},
    next:{ //setRequired훅
        memorizedState:false,
        next:{
            //useEffect훅
            memorizedState : {

            }
        }
    }
}

interface LoginProps {
    loginRequired?: boolean
}

function withLoginComponent<T>(Component: ComponentType<T>) {
    return function(props: T & LoginProps) {
        const {loginRequired,...rest} = props

        if(loginRequired) {
            return <>로그인이 필요해요!</>
        }
        return <Component {...rest} />
    }
}


//로그인 여부, 로그인이 안된 사용자는 다른 컴포넌트를 보는 것이 
//모두 고차 컴포넌트의 역할로 위임된다.

const Component = withLoginComponent((props : {value:string})) => {
    return <h3>{props.value}</h3>
}

export default function App() {
    const isLogin = useLogin()
    return <Component loginRequired = {isLogin} value = "text" />
}