각 페이지들을 살펴보며 공통된 component들을 모아서
작업한 후 props로 퍼블리싱을 하는 방법을 사용하기로 했다.
내가 맡은 작업은?
이중에 나는 이전 프로젝트에서 담당했던 button컴포넌트를 맡기로 했고
이전보다 더 업그레이드 된 코드를 알게되고 작성하는 연습을 하게 되었다.
Button파일을 만들어 한 페이지에 button에 대한 퍼블리싱을 해두고
필요한 곳에서 import해서 사용하기로 했다.
시행착오
1. Button.js에서의 코드작업
아직도 prop을 제대로 사용하는 법을 터득하지 못해서인지
내가 사용하고자 하는 button들을 Button.js파일에 만들었더니
필요한곳에 넣으려고 하니 다 딸려들어오는 것이었다....
{children}을 제대로 사용하지 못한 것 같아서 여러번의 수정을 거쳐서
export default function Button(props) {
const {big, small, children} = props;
return(
<Container big={big} small={small}>
{children}
</Container>
);
}이전에 작성한 코드와 비슷한 코드를 작성하게 되었다.
하지만 여전히 맘에 들지 않는
props 값들... big, small....
뭔가 저렇게 사용하는게 아닌 것 같은데 default 값이라던지
일반적으로 사용되는 값들을 잘 몰랐었다.
그러던중 PropType이라는 것을 알게되었고, prop 값의 타입을 체크할 수 있는
기능이 react에 내장되어있었다.
그래서 최종적으로 작성한 코드는
export default function Button() {
const {
color: DEFAULT_BACKGROUND_COLOR,
textColor: DEFAULT_TEXT_COLOR,
// 기본값을 설정해주기 위함, 함수 코드 밖에서 값을 지정해줌
size,
children,
disabled = false,
}
return (
<Container color={color} textColor={textColor} size={size}
{...props}>
{children}
{disabled && <DisabledContainer />}
//props에 disabled가 들어왔을 때 보여줄 스타일링 컴포넌트
</Container>
);
}
const DEFAULT_BACKGROUND_COLOR = "button배경색"
const DEFAULT_TEXT_COLOR = "button글자색"
Button.propTypes = {
color: PropTypes.string,
textColor: PropTypes.string,
size: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.string,
PropTyeps.element]).isRequired,
onClick: PropTypes.func,
}확실하게 props를 받아서 퍼블리싱 하는것에 대해
다 익혔다고 생각해왔었는데, 이번 작업을 통해서 더 다양한 방법을 알게 되었고
제대로된 작동법을 익힌 것 같다 😏
2. <Link> ▶︎ <Button> 작업
sidebar 내에서 사용된 <Link>들을 내가 component작업을 한
<Button>으로 바꿔주어야 하는데, onClick을 사용하는걸 성공을 못하다가
단어 하나 차이로 작동이 안됬던걸 알아버렸다
<Button onClick={() => {history.push('/main/group')}} />어떤 이유에서인지는 나는 아직 깨닫진 못했으나
이전에 props.history.push('/main/group')으로 적었더니 안됬었는데
이미 props를 파라미터로 넘겨줘서 그런거였을까....? 더 알아봐야지...
그래도 페이지 이동을 성공해서 꽤 뿌듯하다ㅎ
3. 반복되는 코드 정리하기
버튼 3개를 위에서 작성한 페이지 이동을 위한 코드처럼 작성했더니
반복되는 부분이 보였다.
그 부분을 파라미터를 받아 사용하는 코드로 좀 정리해보았다.
물론 이부분도 조금 도움을 받았지만...ㅜㅜ
const moveTo(url) = () => {
history.push(url)
}
return (
<Button onClick={() => moveTo('/main/group')} />
);왜이렇게 응용이 안되는지 모르겠지만
계속 반복하다보면 코드가 보이겠지...?
어떻게 작동하는지 이해한것만으로도 이번엔 만족하고 넘어가야지.
앞으로 남은 작업으로는
아직 group-profile page와 histories page에 대한 퍼블리싱이
머지가 되지 않았기 때문에
그 페이지들 내에 있는 component들은 작업을 하지 못했지만
페이지 내에 있는 페이지 이동 버튼이라던지,
더보기 버튼에 대한 작업도 추가적으로 할 예정이다.
