Redux-Toolkit: React state 관리 props 지옥에서 벗어나보자 - 1

React로 개발하다보면 state를 관리해야되는데 상위 Component에 있는 props를 하위 Component가져와 사용할 경우가 일반적이다.  

 

위 그림처럼 props를 전달해야되는데, 내가 만들고 있던 프로젝트에서 계속 하위 Component로 보내줘야하니.. 실수도 하고 props를 보낸준 줄 알았는데 안보내준 경우도 발견해서 애꿏은 시간을 낭비하기도 했다.

아래 실제로 내가 작성한 react JSX Component 코드들이다. maker.jsx에서 Editor로, Preview로 많은 props를 전달하고 있는걸 볼 수 있다. (여기서 끝이 아니라 또 그 안에서 props를 전달해야한다.)

 

<!--maker.jsx-->
  return (
    <section className={styles.maker}>
      <CardMakerHeader onLogout={onLogout} />
      <div className={styles.container}>
      <!-- 무수히 많은 props들의 전달-->
        <Editor
          cards={cards}
          addCard={createOrUpdateCard}
          updateCard={createOrUpdateCard}
          deleteCard={deleteCard}
          FileInput={FileInput}
        />
        <Preview cards={cards} />
      </div>
      <Footer />
    </section>
  );

<!-- editor.jsx -->

<!-- props -->
const Editor = ({ FileInput, cards, addCard, updateCard, deleteCard }) => {
  return (
    <section className={styles.editor}>
      <h1 className={styles.title}>Card Maker</h1>
      {Object.keys(cards).map(key => (
        <CardEditForm
          key={key}
          card={cards[key]}
          updateCard={updateCard}
          deleteCard={deleteCard}
          FileInput={FileInput}
        />
      ))}
      <CardAddForm addCard={addCard} FileInput={FileInput} />
    </section>
  );
};

 

지금은 그래도 적다면 적은 Component안에서 전달하는데 만약 Component가 30...50...100개가 넘어간다면..?

 

무수한 props들의 요청이 ㅜㅜ.. 출처-코딩애플

위와같은 경우로 상태관리 라이브러리를 사용하려고한다. 다음포스팅에서는 어떤 라이브러리가 있는지, 그리고 선택한 라이브러리에 대해 포스팅 해볼까 한다.