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로 만드는 것이 훨씬 편한 개발이 될 것이라는 것!!!
Author And Source
이 문제에 관하여(React 로 사고하기! (class 로 공통 부분을 컨트롤 하는 것이 아닌 컴포넌트로 해결하기!)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tjdgus0528/React-로-사고하기-class-로-공통-부분을-컨트롤-하는-것이-아닌-컴포넌트로-해결하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)