• Provider 컴포넌트 문맥 안에 존재하지 않는 컴포넌트는 당연히 해당 데이터와 문맥에 접근할 수 없습니다.

Context API를 사용하면 불필요한 Props drilling을 피할 수 있습니다.

Context 생성

const Mycontext = React.createContext(defaultValue);

Context Provider를 통한 데이터 공급

<MyContext.Provider value={전역으로 전달하고자 하는 값}>
{//이 context 안에 위치할 자식 컴포넌트들}
</MyContext.Provider>

App.js

• context 컴포넌트를 React.createContext()를 통해 만들어준다.

  createContext를 통해 만든 컨텍스트에 접근하여 데이터를 꺼내와야 하기 때문에 export로 내보내줍시다.

//해당 context도 es모듈 시스템으로 내보내줘야 다른 곳에서 사용할 수 있기 때문에 export 해준다.

export const DiaryStateContext = React.createContext();


//중략, App 컴포넌트의 return 부에 만들어둔 context를 제공한다. 

return (
    <DiaryStateContext.Provider value={data}>
      <div className="App">
        <DiaryEditor onCreate={onCreate} />
        <div>전체 일기: {data.length}</div>
        <div>기분 좋은 일기 개수 : {goodCount}</div>
        <div>기분 안좋은 일기 개수: {badCount}</div>
        <div>기분 좋은 일기 퍼센트: {goodRatio}%</div>
        <DiaryList diaryList={data} onRemove={onRemove} onEdit={onEdit} />
      </div>
    </DiaryStateContext.Provider>
  );

DiaryList 에서 불러와서 사용한다면,

• useContext 훅에 만들어둔 context컴포넌트를 인자로 전달해줍니다. App.js에 만들어둔 context 컴포넌트는 당연히 export 된 상태여야 하고 사용할 곳으로 import 해오는 것을 명심하세용

src/components/DiaryList.js

import React, { useContext } from "react";
import DiaryItem from "./DiaryItem";
import { DiaryStateContext } from "../App";

function DiaryList({ onRemove, onEdit }) {
  // useContext의 인자로 만들어둔 컨텍스트 컴포넌트를 넣어줘야 한다.
  // export해놓은 context 컴포넌트를 임포트해오고 사용
  const diaryList = useContext(DiaryStateContext);

  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <b>총 {diaryList.length}개의 일기가 있습니다.</b>
      <div>
        <ul>
          {diaryList.map((item) => {
            return (
              <DiaryItem
                key={item.id}
                {...item}
                onRemove={onRemove}
                onEdit={onEdit}
              />
            );
          })}
        </ul>
      </div>
    </div>
  );
}

React Development tool로 확인해보면 아래와 같은 결과를 확인할 수 있습니다.

export default vs export ?

• export default 와 export의 차이점은 export default는 해당 파일에서 하나만 지정이 가능하며 별칭을 통해 다른 곳에서도 별칭을 지정하여 사용이 가능합니다. export로 내보내질 경우 {내보내는 애} 와 같은 형식으로 비구조화 할당으로 뽑아와 사용하며 별칭을 지정하여 사용할 수 없습니다. 대신 export로 내보내는 것에 개수 제한이 없습니다.

우리가 props로 넘겨준 것들 중 이제 값이 아닌 함수들이 남았는데요. 얘네는 또 다른 context를 만들어줘야 합니다. 이유는 DiaryStateContext.Provider도 컴포넌트이기 때문에 value로 넘겨주는 값을 여러 개 넣어주게 되면 이 value값이 변할때마다 해당 Provider도 렌더링이 일어나고 하위 컴포넌트들도 리렌더링이 일어나게 되기 때문입니다.

App.js

export const DiaryDispatchContext = React.createContext();

useMemo를 사용하여 렌더링이 일어나지 않도록 만들어둔 함수명들을 하나로 묶어 줍니다. 새로운 context에 value값으로 넘겨줘야 하기 때문이죵(비구조화 할당을 통해 뽑아쓸거니까 {함수명, 함수명, 함수명}) useMemo를 사용하지 않으면 애써 각각의 함수에 useCallback으로 해놨던 최적화가 의미없게 됩니다.

App.js

//useMemo를 사용하지않고 그냥 객체로 묶어주게되면 컴포넌트가 재생성될 때 같이 다시 만들어지게 된다.
  //그렇기 때문에 useMemo를 통해 묶어줘야 한다.
  const memoizedDispatches = useMemo(() => {
    return { onCreate, onRemove, onEdit };
  }, []);

onCreate, onEdit, onRemove 함수를 하나로 묶어서 그 데이터를 value값으로 넘겨줍니다. 결론적으로 Provider가 중첩된 모습으로 아래와 같이 나타나게 됩니다.

return (
    <DiaryStateContext.Provider value={data}>
      <DiaryDispatchContext.Provider value={memoizedDispatches}>
        <div className="App">
          <DiaryEditor />
          <div>전체 일기: {data.length}</div>
          <div>기분 좋은 일기 개수 : {goodCount}</div>
          <div>기분 안좋은 일기 개수: {badCount}</div>
          <div>기분 좋은 일기 퍼센트: {goodRatio}%</div>
          <DiaryList />
        </div>
      </DiaryDispatchContext.Provider>
    </DiaryStateContext.Provider>
  );

제대로 작동하는 지 확인하려면 리액트 디벨롭먼트 툴을 사용하면 됩니다.

• 해당 Provider에서 3개의 함수 onCreate, onEdit, onRemove가 value로 잘 내려가고 있네요.🤸‍♀️

해당 값을 받아와 쓸 곳에서 Provider컴포가 제공하는 value를 가져와 봅시다.

src/components/DiaryEditor.js

import React, { useState, useRef, useEffect, useContext } from "react";
import { DiaryDispatchContext } from "./App";

const { onCreate } = useContext(DiaryDispatchContext);

onRemove와 onEdit을 prop으로 받던 DiaryItem에서도 context를 통해 value를 가져와봅시다.

src/components/DiaryItem.js

import React, { useState, useRef, useEffect, useContext } from "react";
import { DiaryDispatchContext } from "../App";

function DiaryItem({ id, author, contents, emotion, created_date }) {
  const { onRemove, onEdit } = useContext(DiaryDispatchContext);

  //코드 중략 

함수를 전달해주는 중간다리 역할을 하던 컴포넌트에서 prop으로 넘겨주는 부분을 지워주면 프롭 드릴링없이 context를 통해 다이렉트로 state를 value로 받아 사용할 수 있었습니다!

😎 context를 한 파일에서 생성할 때 개수 제한은 없지만 컴포넌트 간 공유해야하는 데이터가 많을 경우는 redux와 같은 상태관리 라이브러리를 사용하는 것이 더 나을 거 같습니다.

:useReducer를 사용하면, 컴포넌트에서** 상태변화 로직을 분리** 시킬 수 있다! useState처럼 컴포넌트의 상태를 관리해주는 React hooks (useState를 대체할 수 있는 훌륭한 hook입니다.) useState와 같이 비구조화 할당을 통해 사용합니다.

문법

import React, {useReducer} from "react";

// 중략
const [count, dispatch] = useReducer(reducer, 1);

count는 state입니다. dispatch는 상태를 변화시키는 액션을 발생시키는 함수입니다. 우항에 useReducer를 호출할 때에는 꼭 인자로 reducer라는 함수를 전달해야 합니다. dispatch는 상태변화를 일으키는 역할을 하는데 이 일어난 상태변화를 처리해주는 것이 reducer함수입니다. 2번째로 전달하는 인자는 count state의 초기값입니다.

ReducerEx.js

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case 1:
      return state + 1;
    case 10:
      return state + 10;
    case 100:
      return state + 100;
    case 1000:
      return state + 1000;
    default:
      //기존값 리턴
      return state;
  }
};

function ReducerEx() {
  const [count, dispatch] = useReducer(reducer, 1);

  return (
    <div>
      {count}
      <button onClick={() => dispatch({ type: 1 })}>add 1</button>
      <button onClick={() => dispatch({ type: 10 })}>add 10</button>
      <button onClick={() => dispatch({ type: 100 })}>add 100</button>
      <button onClick={() => dispatch({ type: 1000 })}>add 1000</button>
    </div>
  );
}

export default DispatchEx;

예시 코드를 보면, dispatch에게 객체를 전달하고 있는데 이 객체를 action 객체라고 부릅니다. action이 곧 상태변화! 라고 생각하면 됩니다.

action = 상태변화를 설명할 객체 //"reducer야 너가 처리해야할 상태변화 이런 내용임 내가 들고옴~"

dispatch를 호출하면 상태변화가 일어나야 하고 그 상태변화에 대한 처리는 reducer에서 수행합니다.

reduce의 인자로는 state와 action이 있는 걸 확인했습니다.

• 여기서 state란 현재 state를 가리키며 action은 dispatch를 통해 전달해준 액션 객체를 말합니다.

reducer함수는 switch case문을 통해서 액션 타입에 따른 다른 state값을 return해주고 있습니다. return으로 반환하는 것은 새로운 state입니다.

key point 👾 dispatch 함수를 useCallback 내부에서 사용할 때, useCallback의 deps값을 신경쓰지 않아도 된다. reducer가 알아서 현재의 state값을 기억하고 참조하기 때문임

App.js컴포넌트에서 분리된 상태로직 결과물

• useState() -> useReducer()
• setData() -> dispatch()
• reducer 함수는 따로 만들어 줘야 합니다. 보면 App컴포넌트의 내부가 아니라 외부에 작성한 이유이기도 합니다.(원래 useReducer 사용한 이유가 컴포넌트와 상태관리 로직을 분리하는 거였으니까^ㅅ^*)

import React, {
  useRef,
  useEffect,
  useMemo,
  useCallback,
  useReducer,
} from "react";
import "./App.css";
import DiaryList from "./components/DiaryList";
import DiaryEditor from "./DiaryEditor";

const reducer = (state, action) => {
  switch (action.type) {
    case "INIT": {
      return action.data;
    }
    case "CREATE": {
      const created_date = new Date().getTime();
      const newItem = {
        ...action.data,
        created_date,
      };
      return [newItem, ...state];
    }
    case "REMOVE": {
      return state.filter((item) => item.id !== action.targetId);
    }
    case "EDIT": {
      return state.map((item) =>
        //기존 state의 item의 아이디가 수정하려는 item의 아이디(targetId) 와 같으면
        //해당 객체의 기존 프로퍼티는 그대로 두고, 콘텐츠의 내용만 새로운 아이로 업데이트
        //주의점: contents가 뒤로 가게 전개 연산자와 같이 사용
        //수정하려는 item이 아니라면 원래 item 그대로 return
        item.id === action.targetId
          ? { ...item, contents: action.newContents }
          : item
      );
    }
    default:
      return state;
  }
};

function App() {
  //useReducer를 통해 상태관리를 할 것이라서 useState는 주석처리
  // const [data, setData] = useState([]);

  //useReducer의 2번째 인자는 항상 dispatch로
  const [data, dispatch] = useReducer(reducer, []);

  const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());
    console.log(res);

    const initData = res.slice(0, 20).map((item) => {
      return {
        author: item.email,
        contents: item.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++,
      };
    });
    //action 객체에 타입을 적어주고 어떤 데이터로 state를 변경할지도 넘겨줘야 하기 때문에
    //setData로 전달해준 새로운 state를 data라는 이름으로 액션객체에 같이 실어줍니다.
    dispatch({ type: "INIT", data: initData });
    // setData(initData);
  };
  useEffect(() => {
    getData();
  }, []);

  //useRef를 사용하여 고유 아이디를 만들 수 있다.
  const dataId = useRef(0);

  //리스트 아이템 추가 기능
  const onCreate = useCallback((author, contents, emotion) => {
    dispatch({
      type: "CREATE",
      data: { author, contents, emotion, id: dataId.current },
    });

    dataId.current += 1;
  }, []);

  //리스트 아이템 삭제 기능
  const onRemove = useCallback((targetId) => {
    dispatch({ type: "REMOVE", targetId });
  }, []);

  //리스트 아이템 수정 기능
  const onEdit = useCallback((targetId, newContents) => {
    dispatch({ type: "EDIT", targetId, newContents });
  }, []);

  //리액트에서는 return을 가지고 있는 함수를 메모이제이션할 수 있다.
  //메모이제이션하고 싶은 함수를 useMemo를 통해 감싸주면 된다.
  //useMemo()의 첫번째 인자로 콜백함수를 받고 이 콜백함수가 리턴하는 값(연산)을 최적화할 수 있도록 도와준다.
  //useMemo(콜백함수, [deps])-> 콜백함수를 유즈메모로 감싸주면 리턴해주는 아이는 더 이상 함수가 아니다.
  //그렇기 때문에 호출할 때에 ()는 없애줘야 한다. deps는 useEffect의 의존성 배열과 같은 역할을 한다.
  //해당 값에 어떤 값이 변했을 때에만 콜백 연산을 다시 수행할 지 알려준다.

  const getDiaryAnalysis = useMemo(() => {
    const goodCount = data.filter((item) => item.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = Math.floor((goodCount / data.length) * 100);
    return { goodCount, badCount, goodRatio };
  }, [data.length]);

  //useMemo를 함수에 씌워주었으니
  // const { goodCount, badCount, goodRatio } = getDiaryAnalysis();
  const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate} />
      <div>전체 일기: {data.length}</div>
      <div>기분 좋은 일기 개수 : {goodCount}</div>
      <div>기분 안좋은 일기 개수: {badCount}</div>
      <div>기분 좋은 일기 퍼센트: {goodRatio}%</div>
      <DiaryList diaryList={data} onRemove={onRemove} onEdit={onEdit} />
    </div>
  );
}

내부적으로 React는 UI를 최신화하기 위해 비용이 많이 드는 DOM작업의 수를 최소화하기 위해 몇 가지 방법을 활용한다. 많은 애플리케이션에서 React를 사용하면 성능을 최적화하기 위해 많은 작업을 수행하지 않고도 빠른 사용자 인터페이스를 제공할 수 있다.

1. 프로덕트 빌드를 사용해라 (React Developer Tools for Chrome)

   • 개발 모드의 React 기반 사이트에 접속하면 아이콘의 배경이 빨간색으로 표시되는데 앱을 개발할 때에는 개발 모드, 사용자에게 배포할 때에는 프로덕션 모드를 사용해야 한다.
   • .production.min.js로 끝나는 React 파일만이 프로덕션 환경에 적합하다.

2. 재조정(Reconciliation)을 피해라 컴포넌트의 props이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링된 엘리먼트와 비교하여 실제 DOM 업데이트가 필요한 지 여부를 결정한다. 같지 않을 경우 React는 DOM을 업데이트합니다.

Memoization?

• 결과를 캐싱하고, 다음 작업에서 캐싱한 것을 재사용하는 비싼 작업의 속도를 높이는 JS기술
• 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술
• 캐시에 초기 작업 결과를 저장하여 사용함으로써 최적화할 수 있다.

React에서는 useMemo, useCallback, React.memo가 memoization을 기반으로 작동한다. 우선 React.memo는 HOC(고차 컴포넌트) 이고, useCallback과 useMemo는 Hooks이다.

HOC(High Order Componenet)? 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.

const 강력한컴포넌트 = HighOrderComponenet(컴포넌트); 

React.memo(컴포넌트)

: 컴포넌트를 메모이제이션하는 것

• 직접 컴포넌트를 감싸서 사용한다. 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거한다. props가 변경될 때까지 현재 memoized된 값을 그대로 사용하여 리렌더링을 막는다. 물론, 자기 자신의 state가 변하면 리렌더링이 일어난다.

  const MyComponent = React.memo(function MyComponent(props) {
  /* props를 사용하여 렌더링 */
  });

  Reeact.memo는 props를 비교할 때 얕은 비교를 진행하는데, 원시 값의 경우는 같은 값을 갖는지 확인하고 참조값은 같은 주소 값을 가지고 있는 지 확인한다. 결론적으로 memo는 props의 값이 원시값일 때만 유효하고 참조값일 때는 유효하지 않는다. 리액트에서 객체를 비교할 때는 "얕은 비교"를하기 때문이다.

  얕은 비교? 객체 주소에 의한 비교, 객체의 내용물은 비교X (설령 값이 같을 지라도 주소가 다르면 다르다고 판단한다.)

props가 갖는 복잡한 객체에 대하여 얕은 비교만 수행하는 것이 기본동작이며 다른 비교 동작을 원한다면, 두 번째 인자로 별도의 비교함수를 제공해야 한다.

즉, 2번째 비교 함수를 직접만들어서 그 내부에 깊은 비교를 할 수 있도록 로직을 구현하면 렌더링 방지를 할 수 있다.

const CounterA = React.memo(({ count }) => {
  useEffect(() => {
    console.log(`counter A :: count ${count}`);
  });
  return <div>{count}</div>;
});

const CounterB = ({ obj }) => {
  useEffect(() => {
    console.log(`counter B :: obj ${obj.count}`);
  });
  return <div>{obj.count}</div>;
};

const areEqual = (prevProp, nextProp) => {
  //이전 prop 값과 지금 prop값을 비교해서 같다면 true를 반환-> 렌더링X
  // 다르다면 false 반환 -> 렌더링 O
  //   if (prevProp.obj.count === nextProp.obj.count) {
  //     return true;
  //   } else {
  //     return false;
  //   }
  //위의 코드는 어차피 boolean 값을 반환하면되니까 아래와 같이 조건식 자체의 결과를 리턴해주면 된다.
  return prevProp.obj.count === nextProp.obj.count;
};

const MemoizedCounterB = React.memo(CounterB, areEqual);

function OptimizeTest() {
  const [count, setCount] = useState(1);
  const [obj, setObj] = useState({ count: 1 });

  return (
    <div style={{ padding: 50 }}>
      <div>
        Counter A
        <button
          onClick={() => {
            setCount(count);
          }}
        >
          버튼A
        </button>
        <CounterA count={count} />
      </div>
      <div>
        counter B
        <button
          onClick={() => {
            setObj({ count: obj.count });
          }}
        >
          버튼B
        </button>
        <MemoizedCounterB obj={obj} />
      </div>
    </div>
  );
}

export default OptimizeTest;

memo는 오직 성능 최적화를 위해서만 사용된다. 렌더링을 '방지'하기 위해서는 사용하면 안된다.

useMemo(콜백함수, [deps])

: 연산 결과를 메모이제이션하는 것

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo()는 메모이제이션된 값을 반환한다. 인자로는 2개를 받는다. 생성 함수와 그것의 의존성 값의 배열을 전달해야 한다. 그렇게되면 useMemo는 의존성이 변경되었을 때만 메모이제이션된 값만 다시 계산한다. (배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 된다. deps에 값을 넣으셈) -> 이 최적화는 모든 렌더링 시의 고비용 계산을 방지해준다.

👾 useMemo로 전달된 함수는 렌더링 중에 실행된다. 통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에서 하면 안된다. 👾 의존성 값의 배열은 함수에 인자로 전달되진 않는다. 하지만, 함수 안에서 참조되는 모든 값은 의존성 값의 배열에 나타나야 한다.

e.g.) side effects는 useEffect에서하는 일이지 useMemo에서 하는 일이 아니다.

  //리액트에서는 return을 가지고 있는 함수를 메모이제이션할 수 있다.
  //메모이제이션하고 싶은 함수를 useMemo를 통해 감싸주면 된다.
  //useMemo()의 첫번째 인자로 콜백함수를 받고 이 콜백함수가 리턴하는 값(연산)을 최적화할 수 있도록 도와준다.
  //useMemo(콜백함수, [deps])-> 콜백함수를 유즈메모로 감싸주면 리턴해주는 아이는 더 이상 함수가 아니다.
  //그렇기 때문에 호출할 때에 ()는 없애줘야 한다. deps는 useEffect의 의존성 배열과 같은 역할을 한다.
  //해당 값에 어떤 값이 변했을 때에만 콜백 연산을 다시 수행할 지 알려준다.
  const getDiaryAnalysis = useMemo(() => {
    console.log("일기 분석 시작");
    const goodCount = data.filter((item) => item.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
    return { goodCount, badCount, goodRatio };
  }, [data.length]);

  //useMemo를 함수에 씌워주었으니 
  // const { goodCount, badCount, goodRatio } = getDiaryAnalysis();
  const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

위의 예시 코드에서 주의점은 getDiaryAnalysis는 함수였지만 useMemo로 콜백함수를 감싸준 뒤부터는 리턴 값이 함수가 아니라 값이기 때문에 ()로 호출하는 것이 아니라 그냥 변수로 대입해줘야 한다. 코드에서는 구조분해할당을 통해 useMemo의 결과값을 각각의 변수에 할당해주었다.

useCallback

const memoizedCallback = useCallback(()=>{
    dosomething(a,b);
}, [a,b])

메모이제이션된 콜백을 반환합니다. useMemo() Hook의 경우는 메모이제이션된 "값"을 반환했지만 useCallback() Hook은 메모이제이션된 "콜백 함수"를 반환합니다.

어떤 컴포넌트에 함수를 prop으로 내려주게 됐을 때 useCallback을 사용하면 불필요한 리렌더링을 방지할 수 있다.

App.js

//코드 중략....
 const onCreate = useCallback((author, contents, emotion) => {
    //현재 시간은 지역상수로 그냥 여기서 만들어줘도 됨
    const created_date = new Date().getTime();

    const newItem = {
      author,
      contents,
      emotion,
      created_date,
      id: dataId.current,
    };
    //다음 일기 아이디는 다른 아이디를 가져야 하니까 1추가해주는 로직
    dataId.current += 1;
    //최신 아이템이 위로 오게 만들어줘야 하기때문에 원래 데이터를 뒤에 전개연산자로 펼쳐주기
    setData([newItem, ...data]);
  }, []);

예를 들어, DiaryEditor 컴포넌트가 props로 onCreate 함수를 내려받는다고 했을 때 작성된 일기 리스트가 삭제됐을 때, 불필요하게 렌더링이 일어나고 있다. 이 때, onCreate함수가 있는 App.js에서 해당 함수에 useCallback을 적용하고 빈배열을 deps로 주게되면 처음 마운트 됐을 때만 한번 함수가 실행되고 그뒤로는 렌더링을 방지할 수 있다.

하지만, 이렇게되면 일기를 하나 새로 추가했을 때, 이전에 jsonplaceholder로 받아온 기본 20개의 리스트가 사라지고 새로 추가된 일기만 남게된다. 이유: deps의 값이 빈배열이기 때문이다. 그렇다고 deps에 data를 넣게 되면 다시 일기를 수정하거나 삭제했을때도 diaryEditor 컴포넌트가 리렌더링되는 딜레마에 빠지게 된다.

이럴 때는 setData()의 인자로 새로운 값이 아닌 함수 자체를 넘기는 방식으로 업데이트하면 해결된다.

 const onCreate = useCallback((author, contents, emotion) => {
    //현재 시간은 지역상수로 그냥 여기서 만들어줘도 됨
    const created_date = new Date().getTime();

    const newItem = {
      author,
      contents,
      emotion,
      created_date,
      id: dataId.current,
    };
    //다음 일기 아이디는 다른 아이디를 가져야 하니까 1추가해주는 로직
    dataId.current += 1;
    //최신 아이템이 위로 오게 만들어줘야 하기때문에 원래 데이터를 뒤에 전개연산자로 펼쳐주기
    setData((data)=>[newItem, ...data]);
  }, []);

위와 같이 기존 data를 인자로 받아서 새로운 객체를 리턴하는 콜백함수 자체를 setData의 인자로 넘겨주었더니 해결되었다. 사실상 이 방법은 setData(data+1); 를 setData((prev) => prev + 1)로 바꾸는 것과 동일해보인다. 후자의 방법이 이전 state값에 의존하고 있어 더 정확하다고 알고 있다. 이 방법은 함수형 업데이트라고 부른다. data 라는 콜백함수의 인자는 이전 state값의 스냅샷이기 때문에 deps가 빈배열이어도 이전 값을 알고 있어 문제를 방지해준다고 한다.

usecallBack의 가장 중요한 부분은 바로 setData()의 업데이트를 함수형 업데이트 방식으로 처리하는 것이다. 이전의 함수들도 아래와 같이 최적화할 수 있다.

 //리스트 아이템 삭제 기능
  const onRemove = useCallback((targetId) => {
    setData((data) => data.filter((item) => item.id !== targetId));
  }, []);

  //리스트 아이템 수정 기능
  const onEdit = useCallback((targetId, newContents) => {
    setData(
      //원래 데이터 배열의 item(일기) 객체의 아이디가
      //수정하려는 id와 동일하다면 그 객체의 일기요소를 전개 연산자로 풀어주고 contents의 값을 새로운 내용으로 덮어준다. 아니라면 원래 값유지
      (data) =>
        data.map((item) =>
          item.id === targetId ? { ...item, contents: newContents } : item
        )
    );
  }, []);

목표: useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의 초기값으로 사용

JSONPlaceholder를 사용할 것(데이터를 가져올 서버가 없기 때문에 open API를 활용할 거여용)

최상단 컴포넌트에서 데이터를 내려주고 있기 때문에 App.js에서 API를 통해 데이터를 세팅해주겠습니다.

src/App.js

import React, { useState, useRef, useEffect } from "react";
import "./App.css";
import DiaryList from "./components/DiaryList";
import DiaryEditor from "./DiaryEditor";

// https://jsonplaceholder.typicode.com/comments

function App() {
  //fetch를 통해 오픈API의 데이터를 가져와봅시다.
  const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());
    console.log(res);

    //초기값으로 500개 중에 0부터 20개까지만 잘라내도록 하겠음
    const initData = res.slice(0, 20).map((item) => {
      return {
        author: item.email,
        contents: item.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++,
      };
    });
    //가공한 데이터를 가지고 일기 데이터의 초기값을 설정
    setData(initData);
  };
  useEffect(() => {
    getData();
  }, []);

    const [data, setData] = useState([]);

  //useRef를 사용하여 고유 아이디를 만들 수 있다.
  const dataId = useRef(0);


  //아래 코드는 중략 ...

getData 함수(비동기 처리 함수) 코드 설명

• fetch메소드와 async await(ES8)을 통해 비동기 처리(API값을 가져오는 것) 그 이후의 작업은 받아온 데이터를 splice메소드를 통해 20개까지만 잘라내고 잘라낸 각각의 객체를 map함수를 통해 우리가 원하는 형태로 가공하여 return 합니다.

  fetch를 통해 가져온 데이터는 .json() 메소드를 통해 JSON형식으로 변환시켜줘야 합니다.

• emotion 값은 1 ~ 5 까지의 난수를 Math객체를 통해 구현가능합니다.
• id로 들어가는 고유값은 이전에 useRef를 통해 만들어놓은 dataId 라는 변수의 current값을 1씩 증가시켜주는 방법으로 만들어줍니다.
• 완성된 객체가 담긴 initData를 setData함수의 인자로 넘겨주어 초기값을 세팅해줍니다. (useEffect의 콜백함수에서 getData()를 호출해주고 deps값을 아무것도 주지 않으면 컴포넌트가 최초 렌더링됐을 때만 실행됩니다.)

출처: 한입 크기로 잘라 먹는 리액트 (Udemy)

: 생명주기(생애주기)

간단히 하면 탄생/ 변화 / 죽음

• Mount(탄생) - 화면에 나타나는 것
• Update(변화) - 업데이트, 리렌더
• UnMount(죽음) - 화면에서 사라짐

컴포넌트의 생명주기 동안에 우리가 각각 어떤 작업을 처리할 수 있는 것을 라이프사이클을 제어(이용)한다고 합니다. 예를 들어, Mount시점에 초기화 작업을 할 수 있고 Update시점에 예외 처리 작업을, UnMount시점에 메모리 정리 작업을 하는 것을 말합니다.

React Component Lifecycle Methods

클래스형 컴포넌트에서만 제공합니다. state도 사실은 클래스형에서만 사용이 가능했으나 함수형 컴포넌트에서도 React 16.8 버전부터 Hooks를 통해 함수처럼 불러와서 사용할 수 있습니다.

• ComponentDidMount
• ComponentDidUpdate
• ComponentWillUnmount

Class형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드 가독성 문제 등등을 해결하기 위해 등장한 것이 바로 리액트 Hooks 이다.

• useEffect
• useState
• useRef

useEffect를 통해 마운트 시점, 업데이트 시점에 컴포넌트 제어하기

src/Lifecycle.js

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

// 1.마운트 시점에 라이프사이클 제어하기
// 2. 업데이트 시점
// 3. 언마운트 시점

function Lifecycle() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  //useEffect(콜백함수, [deps])
  //1.컴포넌트가 마운트됐을 때만 무언가를 처리하고 싶다면
  //의존성 배열을 []빈배열로 주고 내부에 사이드 이펙트 작업을 해주면 된다.

  useEffect(() => {
    console.log("마운트했당!");
  }, []);

  //2. 업데이트 시 무언가를 처리하고싶다면, 의존성 배열을
  //작성하지 않으면 된다.
  // 즉, useEffect의 dependency Array만 잘 활용하면
  // 우리가 감지하고 싶은 것만 컨트롤하여 쓸 수 있다.
  useEffect(() => {
    console.log("업데이트");
  });

  useEffect(() => {
    if (count > 5) {
      alert("count가 5를 넘어갔습니다! 주의!!! count를 1로 초기화합니다.");
      setCount(1);
    }
  }, [count]);

  useEffect(() => {
    if (text.length === 0) {
      return;
    }
    console.log(`업데이트된 text state의 값은 ${text} 입니다.`);
  }, [text]);

  return (
    <div style={{ padding: 20 }}>
      <div>{count}</div>
      <button
        onClick={() => {
          setCount((prev) => prev + 1);
        }}
      >
        +
      </button>
      <div>
        <input
          value={text}
          onChange={(e) => {
            setText(e.target.value);
          }}
        />
      </div>
    </div>
  );
}

export default Lifecycle;

Unmount시 컴포넌트 제어하기

src/LifecycleTwo.js

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

// 😎한 js파일에서 여러 컴포넌트를 만들어도 된다.
// 테스트용도이기 때문에 가독성은 고려하지 않고 UnmountTest컴포넌트를 만들어보겠습니다.

const UnmountTest = () => {
  return <div>unmount Testing Compo</div>;
};

function LifecycleTwo() {
  const [isVisible, setIsVisible] = useState(false);
  const toggleVisible = setIsVisible(!isVisible);

  //단락회로 평가를 통해서 isVisible이 true 이면 뒤의 컴포넌트를 렌더링하고,
  //아니라면 렌더링하지 않는 것으로
  return (
    <div>
      <button onClick={toggleVisible}>ON/OFF</button>
      {isVisible && <UnmountTest />}
    </div>
  );
}

export default LifecycleTwo;

위의 예시 코드에서 에러가 났는데, 에러 메세지는 아래와 같다.

🔥 Too many re-renders. React limits the number of renders to prevent an infinite loop. 해석: 리렌더링이 너무 많이 발생해용.. 제가 컨트롤하겠슴다. -리액트-

 const toggleVisible = setIsVisible(!isVisible);

원인: 해당 부분에서 함수 자체를 넘겨준 것이 아니라 할당값을 넘겨줬기 때문에 무한렌더링이 발생했다.

 const toggleVisible = () => setIsVisible(!isVisible);

에러해결: 화살표 함수로 변경하니 에러가 사라졌다. 실수하지 말기..!

다시 본론으로 돌아와 useEffect로 언마운트 시점에 컴포넌트를 제어해봅시다.

const UnmountTest = () => {
  useEffect(() => {
    console.log("마운트");
    return () => {
      //언마운트되는 시점에 발생하는 콜백함수를 리턴해주면 된다.
      console.log("언마운트");
    };
  }, []);

  return <div>unmount Testing Compo</div>;
};

위와 같이 UnmountTest 컴포넌트가 언마운트됐을 때 useEffect의 콜백함수에 return값으로 콜백함수를 주면 언마운트 시에 해당 함수를 실행시킬 수 있다.(unmount시에 라이프사이클을 통해 컴포넌트를 제어한 것이죠.)

뭔가 .md같아서 신기하다.

코드는 어떻게 붙나 확인해봐야지

.DiaryEditor > * {
  border-radius: 5px;
  border: #feca57;
}

오우ㅋㅋ마크다운이랑 똑같은 문법이네 신기하다. 내 레포에 wiki에 작성하려다가 궁금해서 velog로 써보는건데 생각보다 매력적인 거 같다. 다른 글을 보니 타이틀마다 링크가 걸리던데 그건 또 어떻게 하는거지... notion이랑 velog 둘 다 매력적인데 notion은 아직 좀 어렵게 느껴진다. 자주 사용하다보면 늘겠지?

와 대박이네 벨로그 ..넘 예뿌당

function DiaryItem({ author, contents, emotion, created_date }) {
  //new Date()에 우리가 만들어놓은 밀리세컨드를 인자로 넘겨주면
  // Date객체를 생성해준다. 이 객체에 toLocaleString() 메소드를 쓰면 알아볼 수 있는 날짜로 변환시켜준다.

  return (
    <div className="DiaryItem">
      <span>
        작성자: {author} | 감정 점수:{emotion}
      </span>
      <br />
      <span className="date">
        작성 일자:{new Date(created_date).toLocaleString()}
      </span>
      <div>내용 : {contents}</div>
    </div>
  );
}