10.29.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-2챕터리뷰

[ 새롭게 알게 된 것 ]

---

1. 함수를 다른 컴포넌트에서 사용할때와 컴포넌트를 다른 컴포넌트에서 사용할때의 호출차이를 알게됨

---

함수를 다른 컴포넌트에서 호출할때는 아래와 같이 { } 중괄호 안에서 호출해줘야됨. 

만약 중괄호로 안 감쌀 경우 에러뜸

---

 

2. context 훅을 만들때 에러 처리하는 법을 알게됨

---

용도는 커스텀 Hook을 사용시 커스텀 Hook이 선언된 컴포넌트 내부에 반드시 렌더링 되어야 하는데 

해당 태그로 감싸져 있지 않은 경우 에러를 발생해서 실수를 예방할 수 있음

export function useTodoNextId() {
  const context = useContext(TodoNextIdContext);
  if (!context) {
    throw new Error('Cannot find TodoProvider');
  }
  return context;
}

---

 

3. dispatch만 필요한 컴포넌트의 불필요한 렌더링 예방법을 알게됨

---

Context를 하나로 만들지 않고 두개를 만들어서 state와 dispatch를 따로 관리하면 됨

Context에서 사용할 값을 지정할 땐 Provider 컴포넌트를 렌더링 하고 value를 설정해주면 됨.

반드시 props로 받아온 children값을 내부에 렌더링 해줘야됨.

const TodoStateContext = createContext();
const TodoDispatchContext = createContext();

export function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(todoReducer, initialTodos);
  return (
    <TodoStateContext.Provider value={state}>
      <TodoDispatchContext.Provider value={dispatch}>
        {children}
      </TodoDispatchContext.Provider>
    </TodoStateContext.Provider>
  );
}

이걸 다른 컴포넌트에서 사용하는 방법은 아래와 같음

import { TodoStateContext, TodoDispatchContext } from '../TodoContext';

function Sample() {
  const state = useContext(TodoStateContext);
  const dispatch = useContext(TodoDispatchContext);
  return <div>Sample</div>;
}

---

 

4. useContext를 직접 사용대신 useContext 사용하는 것이 사용성이 훨씬 편함을 알게됨

---

취향에 따라 useContext를 직접사용해도 됨.

---

 

5. 특정 Context를 다른 모든 컴포넌트에서 사용할 수 있는 방법을 알게됨

---

App 컴포넌트에서 해당 provider를 불러와서 모든 내용을 불러온 provider로 감싸주면 끝.

---