잠깐! 시작하기 전에
이 글은 wecode에서 실제 공부하고(이제 사전 스터디는 아닙니다.), 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다.
또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다. 따라서 원문의 포스팅들이 틀린 정보이거나, 해당 개념에 대한 작성자의 이해가 부족할 수 있습니다.
설명하듯 적는게 습관이라 권위자 발톱만큼의 향기가 조금은 날 수 있으나, 엄연히 학생입니다. 따라서 하나의 참고자료로 활용하시길 바랍니다.
글의 내용과 다른 정보나 견해의 차이가 있을 수 있습니다.
이럴 때, 해당 부분을 언급하셔서 제가 더 공부할 수 있는 기회를 제공해주시면 감사할 것 같습니다.
서론
어느덧 wecode 3주차가 끝났습니다.
시간이 참 빠르네요. React를 시작한지 일주일 정도 된 것 같습니다.
나름의 기준대로 잔뜩 해보고 있지만, 쉽지는 않은 것 같습니다.
개념을 적지는 않겠습니다. React 공식문서가 정말 훌륭하니, 거길 참고해주세요.
그냥 편하게 봐주세요.
Component 쪼개기
event를 처리하기 전, 원본의 코드는 페이지 하나를 단 하나의 component에 넣었습니다.
JSX가 얼마나 위대한 방법인지 새삼 깨달을 수 있었던 것 같습니다.
그러나, 언제나 그랬듯 하나의 공정이 끝나면 다시 Refactoring 해야 한다는 생각에 Component를 좀 쪼개보기로 했습니다.
아직 나누는 기준이 굳건히 확립된 상태는 아니지만, 제가 생각했던 기준은 다음과 같습니다.
-
페이지가 늘어날 때, 해당 컴포넌트를 다시 사용할 수 있는 형태로 만들어둔다.
-
너무 긴 JSX 코드는 지양한다.
위 기준은 학업에 초점이 맞춰지다보니, 보다 더 잘 이해할 수 있는데에 최적화가 되어 있다고 생각합니다.
실무는 다를테니, 가볍게 보고 넘어가주세요.
그 결과 이러한 파일들이 생성되었습니다.
사진만 봐도 파일이 이것저것 참 많습니다.
Login.js
코드 예시로 하나의 페이지 내 컴포넌트들의 관계를 쉽게 알아볼 수 있습니다.
import React from 'react';
import styles from './Login.module.scss';
import { withRouter } from 'react-router-dom';
import LoginArticle from './LoginArticle';
import LoginFooter from './LoginFooter';
class LoginDongwu extends React.Component {
render() {
return (
<>
<div className={`${styles.space}`}></div>
<section className={`${styles.loginSection}`}>
<main className={`${styles.loginMain}`}>
{/* <LoginNav /> */}
<LoginArticle history={this.props.history} />
<div className={`${styles.facebookLogo}`}>
<span>from</span>
<span>FACEBOOK</span>
</div>
</main>
</section>
<LoginFooter />
</>
);
}
}
export default withRouter(LoginDongwu);
기존 한 파일에 페이지 전체가 들어가는 형태가 아닌 나름의 기준으로 쪼갠 결과입니다.
Login page 내부의 계층 구조를 이전보다 쉽게 파악할 수 있게 되었습니다.
또한 모듈 개념에 걸맞도록 css -> module.scss 로 변경했습니다.
해당 파일의 내부는 이렇습니다.
Login.module.scss
:root {
--blue: #0095f6;
--light-blue: rgb(198, 222, 250);
--grey: rgb(219, 219, 219);
--light-grey: rgb(250, 250, 250);
--input-font-color: rgb(142, 142, 142);
--pink: #cd2e83;
--text-grey: rgba(38, 38, 38, 0.5);
}
.hidden {
visibility: hidden;
}
@mixin flex-set(
$flex-direction: column,
$justify-content: center,
$align-items: center
) {
display: flex;
flex-direction: $flex-direction;
justify-content: $justify-content;
align-items: $align-items;
}
@mixin size($width: 0px, $height: 0px) {
width: $width;
height: $height;
}
@mixin translateCenter() {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loginSection {
@include flex-set(column, center, stretch);
.loginMain {
@include flex-set(column, space-between, center);
min-height: 100vh;
.loginHeader {
@include flex-set(row, center, initial);
width: 100%;
margin: 16px;
font-size: 12px;
.headerContainer {
display: flex;
height: 18px;
color: var(--grey);
> i {
margin-left: 5px;
}
}
}
.facebookLogo {
@include flex-set(column, center, center);
align-items: center;
margin-bottom: 28px;
font-size: 14px;
line-height: 16px;
> span:first-child {
color: var(--grey);
}
}
}
}
현재 scss 파일은 리팩토링이 진행된 상태가 아니라 색상에 대한 변수들을 이전과 같이 관리하고 있는 모습입니다.
추후 완료된 상태에서는 상당히 아름답지 않을까 생각이 드네요.
이런 방식으로 모든 컴포넌트들에 scss를 적용하면, 관리가 상당히 용이합니다.
또한 해당 컴포넌트에 제어해야 하는 이벤트가 있을 때 빛을 발하는 것 같습니다.
state 끌어올리기는 좀 더 연습하고 글로 올려보겠습니다.
마치며
오늘은 상당히 짧은 내용이었습니다.
아직 시도해보고 싶은 사항이나, 작업할 사항이 정말 많아서 시간이 너무 부족하네요.
해당 시리즈의 끝에는 아마도 전체 완성본에 대한 글을 쓸 것 같습니다.
Component를 분리하는 것도 어렵지만 해당 계층에서 state-props를 잘 적용시키는 것은 더 어려운 것 같습니다.
더군다나 처음인지라, 매번 파일을 3~4개 정도 켜두고 state-props의 흐름을 관찰하고 있습니다.
다음번에는 한 번 만들고 있는 clone의 전체 구조를 한 번 올려볼까 합니다.
그럼 이번 글은 여기서 마치도록 하겠습니다.
