TIL 0819

회고록

useContext

props를 전달할때 부모에서 자식으로 계속 전달하는 방법 prop drilling을 사용하지 않고 더 편하게 UseContext를 사용한다 추후 redux를 배울때 참조하게 될 개념이다

import { createContext } from "react";

export const FamilyContext = createContext(null);
// useContext를 파일을 하나 만들어서 정의한다 (null)값은 초기 값이다

import React from "react";
import Father from "./Father";
import { FamilyContext } from "../context/FamilyContext";

function GrandFather() {
  const houseName = "스파르타";
  const pocketMoney = 10000;

  return (
    <FamilyContext.Provider value={{ houseName, pocketMoney }}>
      <Father />
    </FamilyContext.Provider>
    // 위에 만든 useContext 파일을 Father 컴포너틑 위에 감싸고 value를 설정해주고 provider를 적어준다
    그 후 Father 안에 있는 컴포넌트 들은 다 접근 가능하다
  );
}

export default GrandFather;

childe 컴포넌트
function Child({ houseName, pocketMoney }) {
  const stressedWord = {
    color: "red",
    fontWeight: "900",
  };

  const data = useContext(FamilyContext);
  console.log("data", data);

  return (
    <div>
      나는 이 집안의 막내에요.
      <br />
      할아버지가 우리 집 이름은 <span style={stressedWord}>{data.houseName}</span>
      라고 하셨어요.
      <br />
      게다가 용돈도 <span style={stressedWord}>{data.pocketMoney}</span>원만큼이나
      주셨답니다.
    </div>
  );
}

export default Child;

value의 값이 바뀌면 다 리랜딩 되므로 value값을 신경써야한다

리랜더링 발생 조건에는 3가지가 있다

• 컴포넌트에서 state가 바뀌었을 때
• 컴포넌트가 내려받은 props가 변경되었을 때
• 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두

최적화를 통하여 리랜더링을 줄일 수 있다 그렇다고 남발하면 역효과가 날 수 있다

memo

자녀 컴포넌트에서 바뀐게 없을때 리랜더링을 막고 싶으면 memo를 사용한다

export default React.memo(Box1);
export default React.memo(Box2);
export default React.memo(Box3);
// 최초 랜더링 이후에는 값이 바뀌지 않는이상 리랜더링이 일어나지 않는다

useCallback

위 처럼 자식 컴포넌트가 바뀌지 않지만 함수를 작동해서 리랜더링이 발생 할 수 있다

jsx

	**// count를 초기화해주는 함수
  const initCount = () => {
    setCount(0);
  };**

  return (
    <>
      <h3>카운트 예제입니다!</h3>
      <p>현재 카운트 : {count}</p>
      <button onClick={onPlusButtonClickHandler}>+</button>
      <button onClick={onMinusButtonClickHandler}>-</button>
      <div style={boxesStyle}>
        <Box1 **initCount={initCount}** />
        <Box2 />
        <Box3 />
      </div>
    </>
  );
}

Box1.jsx


**function Box1({ initCount }) {**
  console.log("Box1이 렌더링되었습니다.");

  **const onInitButtonClickHandler = () => {
    initCount();
  };**

  return (
    <div style={boxStyle}>
      **<button onClick={onInitButtonClickHandler}>초기화</button>**
    </div>
  );
}

// 변경 전
const initCount = () => {
  setCount(0);
};

// 변경 후
const initCount = useCallback(() => {
  setCount(0);
}, []);
// useCallback을 사용하여 리랜더링이 일어나지 않게 한다

useMemo

맨 처음 해당 값을 반환할 때 그 값을 메모리에 저장하여 함수를 호출할때마다 계산하는게 아니라 이미 저장한 값을 단순히 꺼내와서 쓴다 복잡한 계산 결과값을 사용할때 사용한다

import React, { useState, useMemo } from "react";

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

  const heavyWork = () => {
    for (let i = 0; i < 1000000000; i++) {}
    return 100;
  };

	// CASE 1 : useMemo를 사용하지 않았을 때
  const value = heavyWork();

	// CASE 2 : useMemo를 사용했을 때
  // const value = useMemo(() => heavyWork(), []);

  return (
    <>
      <p>나는 {value}을 가져오는 엄청 무거운 작업을 하는 컴포넌트야!</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        누르면 아래 count가 올라가요!
      </button>
      <br />
      {count}
    </>
  );
}

export default HeavyButton;

오늘은 다양한 hooks들을 배웠으면 내일부터는 redux에 대해 깊게 알아 볼 예정이다