직업훈련/새싹(SeSAC)

[새싹(SeSAC) 프론트엔드] day37 221206

뉼👩🏻‍💻 2022. 12. 6. 15:09
728x90
반응형
SMALL

 

📍ueReducer()

: 컴포넌트의 상태를 관리할 때 사용하는 Hooks

const [state, dispatch] = useReducer(reducer, initialState); 

 

값 설명
state 컴포넌트에서 사용할 상태 값
dispatch 액션을 발생시키는 함수
reducer reducer 함수
: 개발자가 직접 정의해야 하는 함수
initialState 초기 상태 값

 

dispatch( { type : value} )  // 액션이 생긴 모양이 객체

 

function reducer(state(현재 변수의 상태값), action(dispatch의 객체 = 업데이트를 할 정보)) { 
    // 새로운 상태를 만드는 로직
    return 새로운 상태;
}

 

 

- 특징 

: 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능 

: 다른 컴포넌트에서도 해당 로직을 재사용 가능 

 

 

useState와 useReducer는 근본은 똑같은 hooks

 

 

useReducer로 업데이트 로직을 밖에 빼둔다면 다른 곳에서도 사용할 수 있음 (➡️ 재사용성)

 

useState() useReducer()
컴포넌트에서 관리하는 값이 한 개  컴포넌트에서 관리하는 값이 여러 개 
값이 단순한 숫자, 문자열, 불리언 등의 값인 경우 구조가 복잡한 경우 

 

 

 

 

function countReducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "INCREMENT":
      return state + 1;
    
      //default를 안쓰면 작동은 되도 에러가 남
    default:
      return state;
  }
}

export default countReducer;

 

 

📍useMemo()

- 컴포넌트 최적화를 위해 사용되는 Hook

- 동일한 계산을 하는 함수를 포함하고 있는 컴포넌트가 반복적으로 렌더링이 될 때, 해당 함수의 값을 메모리에 저장해 놓고 재사용할 수 있게 함

const memoizedValue = useMemo (
    () => {
                      // 연산량이 많은 작업을 수행 
                     return compute(a, b)
              }, [a, b]
)

- 렌더링하는 과정에서 특정 값(배열에 있는 값)이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았따면 이전에 연산했던 결과를 다시 사용하는 방식 

 

 

메모이제이션(Memoization) 

- 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거 

- 프로그램 실행 속도를 빠르게 하는 기술 

 

 

 

 

- 실무에서 useMemo를 크게 사용할 일은 거의 없었음 

➡️ 리액트가 엄청나게 빠르기 때문에 페이지의 지연을 실감할만큼 연산속도가 느린 상황을 겪기는 어려움 

➡️ 복잡한 연산은 백에서 해결을 해줄 것

 

 

* useMemo() 사용시 주의사항 

useMemo()의 목적은 값을 재사용하기 위해 별도의 메모리를 할당하여 값을 저장하는 것.

그러므로 불필요한 값까지 메모이제이션하면 메모리 용량이 늘어나 성능 저하가 발생할 수 있음 

- useMemo()에 저장하는 값은 로직이 아니라 값이여야 한다 

 

 

📍useCallback()

- 이미 생성해 놓은 함수를 재사용할 수 있게 해주는 Hook

- useMemo()와 유사한 Hook

 

- 컴포넌트에 useCallBack()을 사용하지 않고 함수를 정의한 경우 

➡️ 렌더링이 발생할 때마다 함수가 새로 정의됨

const memoizedCallback = useCallBack( 
                                                                           () => doSomething(a, b),
                                                                           [a, b]
                                                );

//useCallBack(콜백함수, [의존성 배열]);

 

 

** 자바스크립트 함수의 동등성 

const UseCallBackComponent1 = () => {
    const name1 = () => "soo";
    const name2 = () => "soo";
    
    console.log("name1 : ", name1) //name1 : () => "soo"
    console.log("name2 : ", name2) //name2 : () => "soo"

	return <div>{name1 === name2 ? "같다" : "다르다"} </div>;
};

export default UseCallBackComponent1;

* 함수는 객체이므로 다른 주소값을 가짐 

 

const UseCallBackComponent2 = () => {
  const [count, setCount] = useState(0);

  const clickHandler = () => {
    console.log("count : ", count);
  };
  
  useEffect(() => {
    console.log("clickHandler 완료");
  }, [clickHandler]);
  return (
    <div>
      <hr />
      <br />
      <input
        type="number"
        value={count}
        onChange={(e) => setCount(e.target.value)}
      />
      <button onClick={clickHandler}>숫자출력</button>
    </div>
  );
};

export default UseCallBackComponent2;

**clickHandler를 의존성 배열에 넣어놔도 input값이 바뀔 때마다 렌더링이 다시 되면서 clickHandler가 다시 정의되기 때문에 바뀌었다고 인지하므로 useEffect가 실행됨 

➡️ 다시 함수가 생성되면서 메모리 주소가 바뀌었기 때문에 useEffect가 실행됨

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 8주차 블로그 포스팅(화)

728x90
반응형