React 로 사고하기! (class 로 공통 부분을 컨트롤 하는 것이 아닌 컴포넌트로 해결하기!)

몇 주간 바닐라 js로 작업하며 react로 사고를 하지 않았기도 했고 js로 만들었던 작업물을 처음부터 다시 만들지 않고 수정해서 react로 만드는 작업을 시도하다 보니 react로 사고하기가 어려웠던 것 같다.

그래서 계속 react로 사고하기 위해 타파해야 했던 부분이 여러 개 있었지만 오늘 겪었던 타파가 좀 큰 알 깨기였던 것 같아 블로그를 작성해 보려 한다.

문제가 발생한 배경

• 오른쪽 main 부분에 Stories 와 Recommends 부분에 공통적이 스타일이 적용되고 있었다.
• container 의 border, padding 부분과 각 컴포넌트 들의 header 부분이 똑같이 들어가고 있었다.
• 그래서 상위 부분인 MainRight.scss 에서 하위 부분에 공통으로 쓸 right-wrapper, wrapper, right-header, 등의 클라스를 작성하고 하위 부분에 적용하고 있었다.

문제

• 하지만 이렇게 되면 컴포넌트로 분리한 Recommends 와 Stories 의 스타일이 계속 상위 컴포넌트에 의존하게 되어 제대로 된 분리를 할 수 없었다.

MainRight

function MainRight() {
  return (
    <section className="main-right">
      <Myprofile />
      <Stories />
      <Recommends />
      <Footer />
    </section>
  );

Recommends

function Recommends({recommends}) {
  return (
    <div className="right-wrapper wrapper">
      <div className="right-header">
        <span className="right-title">회원님을 위한 추천</span>
        <span className="show-all">모두 보기</span>
      </div>
      <ul className="recommends">
        {recommends.map((recommend, i) => (
          <Recommend recommend={recommend} key={i} />
        ))}
      </ul>
    </div>
  );
}

Stories

function Stories({stories}) {
  return (
    <div className="right-wrapper wrapper">
      <div className="right-header">
        <span className="right-title">스토리</span>
        <span className="showAll">모두 보기</span>
      </div>
      <ul className="stories">
        {stories.map((story, i) => (
          <Story story={story} key={i} />
        ))}
      </ul>
    </div>
  );
}

시행착오

그래서 scss 의 mixin 을 사용해 보기도 하고 value 로 적용을 해보기도 했다. 하지만 마무리 시도를 해도 뭔가 더 복잡해질 뿐 해결책이라는 느낌이 들지 않았다.

그러다 react 적 사고를 하게 되었다!!

두둥!!

이 반복되는 스타일 부분을 컴포넌트로 만들면 되는 것이 아닌가?!!!!

해결책

• container 부분을 wrapper 컴포넌트로 만들기.
  (children props 를 만들어 하위 컴포넌트 감싸주고 포함된 컴포넌트 보이게 하기)

• 각 header 부분을 삭제하고 header 컴포넌트를 만들어 각 title을 props로 전달해 각각의 header 만들기

변경된 MainRight

function MainRight() {
  return (
    <section className="main-right">
      <Myprofile />
      <MainRightWrapper>
        <MainRightHeader title="스토리" />
        <Stories />
      </MainRightWrapper>
      <MainRightWrapper>
        <MainRightHeader title="회원님을 위한 추천" />
        <Recommends />
      </MainRightWrapper>
      <Footer />
    </section>
  );

변경된 Recommends

function Recommends({recommends}) {
  return (
      <ul className="recommends">
        {recommends.map((recommend, i) => (
          <Recommend recommend={recommend} key={i} />
        ))}
      </ul>
  );
}

변경된 MainRight

function Stories({stories}) {
  return (
      <ul className="stories">
        {stories.map((story, i) => (
          <Story story={story} key={i} />
        ))}
      </ul>
  );

추가된 MainRightWrapper

function MainRightWrapper({ children }) {
  return <div className="main-right-wrapper">{children}</div>;
}

추가된 MainRightHeader

function MainRightHeader({ title }) {
  return (
    <div className="main-right-header">
      <span className="title">{title}</span>
      <span className="show-all">모두 보기</span>
    </div>
  );
}

깨달은 점

• 이를 통해 리액트로 사고해야 한다는 말을 이해할 수 있었다.
• 단순히 화면에 보이는 부분을 쪼개는 것이 아닌
• 컴포넌트들이 서로 의존하지 않고 반복되지 않도록 하는 것
• 고전적인 js, css의 사고방식을 탈피해서
  말 그대로

리액트로 사고하기를 해야 한다는 것!!!

• 쪼개는 것에 초점을 맞추지 않고 더 고차원적으로 고민하여 컴포넌트를 나눌 생각을 충분히 해야 한다는 것을 알게 되었다.

• 오늘도 역시 느낀 기획에서 충분히 많이 생각하고 또 생각해야 한다.

• 마음이 앞서 코드부터 치지 말자!!!!!

• 시간이 아깝게 느껴지더라도 최대한 생각하고 계획하고 사고하자!!

• 이번에는 react를 더 제대로 느끼기 위해 js를 react로 고쳐 다음에는 이런 일이 없겠지만 다음부터는 js를 react로 고칠 생각하지 말고 그냥 처음부터 react로 만드는 것이 훨씬 편한 개발이 될 것이라는 것!!!

[React 공식문서] React 로 사고하기!