[React / 리액트] 숙련주차 WIL

1. Redux 의 흐름 구조

 

[1] 상태가 변경되어야 하는 이벤트가 발생하면 변경될 상태에 대한 정보가 담긴 Action 객체 생성

[2] 만든 Action 객체는 Dispatch 함수의 인자로 담겨져 전달됨

[3] Dispatch함수를 통해 담겨져 온 Action 객체는 Reducer 함수로 전달해줌

[4] Reducer 함수는 Action 객체의 데이터값을 확인하고, 그 값을 가공하여 전역 상태 저장소인 Store의 상태를 변경

[6] Store에서 변경된 상태값은 React의 리렌더링을 통해 컴포넌트에서 보여줌

 

2.  리액트 개발 시, 렌더링 최적화 방법에 이용할 수 있는 다음 세 가지의 특징과 차별점

1. React.memo

    [1] React.memo 특징

       : React는 먼저 컴포넌트를 렌더링 한 뒤, 이전 렌더링된 결과와 비교하여 DOM 업데이트를 결정한다.

         만약 렌더링 결과가 이전과 다르다면, React는 DOM을 업데이트 한다.

         React.memo로 컴포넌트를 매핑 했을 때,  React는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다.

         그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징된 내용을 재사용하여 리렌더링을 방지한다.

 

    [2] React.memo를 사용해야 할 경우

        - props로 렌더링이 자주 일어나는 컴포넌트

        - 무겁고 큰 비용이 큰 연산이 있는 경우

    [3] React.memo의 사용을 피해야 할 경우

        - 성능 관련 변경이 잘못 적용 된다면 성능이 오히려 악화될 수 있다. 

        - 컴포넌트가 다른 props로 자주 랜더링 될거라 예상 될 때 ( 쓸때없는 props 비교)

        - 대부분의 결과가 다르다면 메모이제이션 기법의 이점을 얻기 어렵다

        - 결과가 다르다면 React.memo()의 비교함수 대부분은 false를 반환, 리랜더링이 일어날 것이므로 비교작업이 추가된다. 

    [4] React.memo 정리

        - 메모이제이션된 '값'을 반환

1. useCallback

    [1] 설명

       : 메모이제이션된 '함수'를 반환 

       : deps가 변한다면, fn이라는 새로운 함수를 반환한다

useCallback(fn, deps)

   

    [2] useCallback 사용하는 경우   

       - 자식 컴포넌트에 props로 함수를 전달할 경우

       - 외부에서 값을 가져오는 api를 호출하는 경우

1. useMemo

      [1] 설명

         : 메모이제이션된 '값'을 반환한다.

         : deps가 변한다면, () => fn 이라는 함수를 실행하고, 그 함수의 반환 값을 반환한다

useMemo(() => fn, deps)

 

3. <form>에서 <button type="submit">을 사용시 리덕스 데이터초기화 되는 이유

    : <form> 태그내에서 button 생성시 type에는 submit, reset, button 이렇게 3가지 값을 지정해 줄 수 있는데, 아무런 값을 지정하지 않는다면 default로 submit이 지정되며, submit 속성은 초기화가 되는 특징을 가지고 있다.

submit type으로 누르게 되면, submit 이벤트는 데이터를 보내기 위해 페이지를 리로딩하고, 페이지가 리로딩이 되고나면, store의 값이 초기화되기 때문이다.

 

4. 새로고침 시에도 리덕스 내의 데이터를 유지하기 위한 방법

    1) Form 태그를 사용하지 않는다

    2) preventDefault() 를 사용한다

       - 새로고침 이벤트를 막아주는 메소드

    3) react - router - dom 패키지 사용한다.

       - link, navigate는 주소만 바꾸고 페이지를 새로고침(초기화)하지 않는다

 

5. React Hook 중 useRef 사용 예시 및 필요한 경우

    1) 컴포넌트에 focus를 위치시킬 필요가 있는 경우

    2) 속성 값을 초기화(clear)할 필요가 있는 경우

    3) 컴포넌트 안의 변수를 관리할 경우 (리렌더링을 하지 않으면서 컴포넌트의 속성 정보를 조회,수정할 때)

    4) 미디어의 재생을 관리할 때

 

6. 리액트에서의 Virtual DOM

  : 리액트가 가상 DOM을 사용하는 이유는 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁다. 그래서 React는 실제 DOM의 변경사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리한다.

 

7. 비동기 프로그래밍

   : 비동기 프로그래밍이란 작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술이다. 작업이 완료되면 프로그램이 결과를 제공한다

   - 콜백지옥의 문제점

     : 콜백 지옥이 형성될 경우 가독성이 떨어져 로직이 어떻게 연결되어있는지 파악하기 어렵다.

       따라서 에러 해결, 디버깅, 유지보수가 곤란한 경우가 발생한다.

   - 콜백지옥의 대안

    1) promise 

    - Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 반환한다

    2) async & await

    - async & await는  promise의 후속처리 메서드(then, catch, finally) 없이 마치 동기 처럼 프로미스가 처리결과를

       반환할 수 있도록 구현할 수 있다.

    - async & await 는 Promisee를 사용하기 때문에 promise를 알아야 하고, 콜백의 깊이가 깊지 않을 때에는

       promise를 사용하는 것이 유용할 수 있다.