20240124 TIL #23

[1] TIL

  1. React Hooks

    (1) useState

      가장 기본적인 hook

      함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 

      const [state, setState] = useState(초기값);

    

    (2) useEffect

      1) useEffect : 렌더링 될 때, 특정한 작업을 수행해야할 때 설정하는 훅

        a. 어떤 컴포넌트가 화면에 보여졌을 때, 무엇을 실행하고 싶다

        b. 어떤 컴포넌트가 화면에서 사라졌을 때, 무엇을 실행하고 싶다 (return)

     

      2) 과정

        a. input에 값을 입력

        b. value, 즉 state가 변경

        c. state가 바뀌었기 때문에 => App 컴포넌트가 리렌더링

        d. 리렌더링 => useEffect()

        e. a ~ d 반복

      3) dependency array : 의존성 배열

        - 이 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행함.

        - 의존성 배열을 빈 배열로 둬도 useEffect가 동작함

          : 어떤 값을 입력하던지 간에, 어떤 값이 변하든지 간에 의존성 배열에는 값이 없기 때문에

           어떤 state가 변해도 화면이 처음 로딩될 때만 동작함!

      

    (3) useRef

      1) 저장 공간의로서의 useRef 

         a. state와 비슷한 역할

           state는 변화가 일어나면 다시 렌더링되고 내부 변수들은 초기화됨.  => 리렌더링이 꼭 필요한 값을 다룰 때

       2) DOM 요소 접근 방법으로서의 useRef 

         a.  DOM 요소에 접근할 수 있도록 돕는 react hook => DOM 요소를 어딘가에 저장하고,

           그것을 갖다 쓸 수 있게 하는 방법을 줌

       

       3) JavaScript : document.getElementbyId, document.qeurySelector로 DOM 요소에 접근

       4) const ref = useRef( )

        - 이렇게 설정된 ref값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지, 죽기 전까지 그 값을 유지함!

        - ref에 저장된 값은 렌더링을 일으키지 않음. 값이 변해도 내부 변수들이 초기화되진 않음.

           => 리렌더링을 발생시키지 않는 값을 저장할 때

 

    (4) useContext

       1) 리액트에서 제공하는 기본적인 context

         : 전역적으로 사용되는 어떤 것을 표현할 때

       2) props drilling을 방지

         react context API : useContext hook을 이용해 전역 데이터를 관리 

       3) 요소

         - createContext : context 객체를 만듦

         - consumer : context 변화를 감지

         - Provider : context를 하위 컴포넌트로 전달

           provider에서 제공한 value가 달라지면 하위에 있는 모든 component가 리렌더링 => 매우 비효율적

         - 대안이 memoization

     

      (5) React.memo, useCallback, useMemo : 최적화

        1) 렌더링의 발생 조건

          a. 컴포넌트에서 state가 바뀌었을 때

          b. 내려받은 props가 변경되었을 때

          c. 부모 컴포넌트가 리렌더링된 경우 => 자식은 모두

         2) 최적화 : optimization

           - 리렌더링이 빈번하게, 자주 일어난다 => cost가 많이 발생한다, 비싸다

           - SEO

         3) React.memo : 컴포넌트

           - import하지 않아도 React.memo 이렇게 더 많이 사용하는 듯

           - React.memo : 컴포넌트를 메모리에 임시 저장 = 캐싱 

             => memoization

          - export default React.memo(.  )

         4) useCallback : 함수

          -  인자로 들어오는 함수 자체를 메모이제이션

          - App.jsx가 처음에 렌더링 될 때 함수를 이 모양 그대로 메모리에 저장

            => 함수가 리렌더링 되더라도 갱신되는 것이 아니라 메모이제이션 된 상태로 남아있음.

         5) useMemo : value

          - Memo = memoization : 기억

          - value : 함수가 return하는 값 or 값 자체

          - const value = useMemo( ( ) => { return 함수 ( ) }, [dependencyArray] )