현재 구현중인 프로젝트에서 임의의 절차 진행 상황을 보여주는 화면을 짜고 있다. 각 단계마다 3가지의 상태를 다른 모습으로 보여주기 위해 목데이터를 만들어야 하는데 목데이터를 만들면서 확장성있게 짤 수 있는 방법을 생각해보라는 업무를 받았다. (덜덜)
오랜기간 공부를 해오면서 확장성 좋은 코드, 가독성 좋은 코드 등 좋은 코드에 대한 키워드들을 많이 보고 들어왔다. 하지만 정작 시간이 부족한 팀 프로젝트, 빡빡한 학원 일정으로 좋은 코드에 대한 키워드를 듣기만 하고 실제 적용하지 못했었고 '좋은 코드를 짜기 위한 다양한 방법들이 존재한다!' 정도로만 알고 있었다. 이번 기회에 확장성 있는 코드와 가까워지는 시간을 가져야겠다.
먼저 확장성 있는 코드란 ?
기존 로직에 새로운 값들이 추가, 삭제될 때 내부적으로 변경이 적은 코드 !
코드로 예를 들어보자.
const testComponent = ({ type, value, onChange }) => {
return <Input type={type} value={value} onChange={onChange}></Input>;
};
const Input = styled.input`
/* styling */
`;위 코드는 Input 컴포넌트에 새로운 이벤트 핸들러나 값을 전달하기 어려운 구조다.
즉, 변경할 때마다 Input 컴포넌트에 props를 변경해줘야 한다.
// 확장성을 고려한 코드
const testComponent = (props: HTMLAttributes<HTMLInputElement>) => {
return (<InputStyle {...props}></InputStyle>)
}
const InputStyle = styled.input`
// styling
`;
위 코드는 props의 타입을 정해주고 이어서 렌더링 되는 부분인 <InputStyle {...props}></InputStyle>에서 props를 {...props}를 이용해 받음으로써 props가 변경되더라도 Input 컴포넌트에 추가적으로 구현해야할 부분이 적어지는 코드다.
정리
간단하게 정리를 해보자면 확장성 있는 코드란 로직의 변경이 아니라 사용되는 값들의 변경을 좀 더 유연하게 대처하기 위한 목적의 코드 라고 생각한다. '확장성 있는 코드를 짜는 방법'과 같은 모범 답안은 없지만 변화의 유연하게 짜기 위해선 그만큼 서비스 규모가 커지거나, 변경되는 순간을 고려할 수 있을만한 시야와 경험이 필요하고 코드를 짜면서도 기능 구현뿐만 아니라 확장성을 고려해야겠다는 생각이 든다.
