코드 리팩토링

💬실무에서 클린코드란? = 유지보수 시간의 단축

1. 흐름 파악이 어렵고
2. 도메인 맥락 표현이 안 되어
3. 동료에게 물어봐야 알 수 있는 코드

 

💬기존 코드 파악

function QuestionPage(){
  const [popupOpened, setPopupOpened] = useState(false); // 추가코드
  
  async function handleQuestionSubmit(){
		// 추가코드 start
	  const 연결전문가 = await 연결전문가_받아오기();
	  if(연결전문가 !== null){
		  setPopupOpened(true);
	  }
	  // 추가코드 end
		const 약관동의 = await 약관동의_받아오기();
		if(!약관동의){
			await 약관동의_받아오기();
		}
		await 질문전송(questionValue);
		alert("질문이 등록되었어요.");
	}
	
	async function handleMyExpertQuestionSubmit(){
		await 연결전문가_질문전송(questionValue, 연결전문가.id);
		alert(`${연결전문가.name}에게 질문이 등록되었어요.`);
	}
	
	return {
		<main>
			<form>
				<textarea palceholder="어떤 내용이 궁금한가요?"/>
				<Button onClick={handleQuestionSubmit}>질문하기</Button>
			</form>
		</main>
}

문제1. 하나의 목적인 코드가 흩뿌려져 있다.

문제2. 하나의 함수가 여러 가지 일을 하고 있다.

세부 구현을 모두 읽어야 함수의 역할을 알 수 있게 된다.

문제3. 함수의 세부 구현 단계가 제각각이다.

 

💬코드 리팩토링 V1

문제3. 함수의 세부 구현 단계가 제각각이다. → 함수의 세부 구현 단계 통일 (추상화)

async function handleNewExpertQuestionSubmit(){
	await 질문전송(questionValue);
	alert("질문이 등록되었어요.");
}

async function handleMyExpertQuestionSubmit(){
	await 연결전문가_질문전송(questionValue, 연결전문가.id);
	alert(`${연결전문가.name}에게 질문이 등록되었어요.`);
}

문제1. 하나의 목적인 코드가 흩뿌려져 있다. → 하나의 목적인 코드는 뭉쳐두기 (응집)

return(
	<main>
		<form>
			<textarea placeholder="어떤 내용이 궁금한가요?" />
			{연결전문가.connected ? (
				<PopupTriggerButton
					popup={(
						<연결전문가팝업
						onButtonSubmit={handleMyExpertQuestionSubmit} />
					)}
				>
					질문하기 </PopupTriggerButton>
				) : ( ... )
		</form>
	</main>

문제2. 하나의 함수가 여러 가지 일을 하고 있다. → 함수가 한 가지 일만 하도록 쪼개기 (단일책임)

: <Button onClick={async() => {
		await openPopupToNotAgreedUsers();
		await handleMyExpertQuestionSubmit();
	}}
	>
	질문하기
	</Button>

...

async function openPopupToNotAgreedUsers(){
	const 약관동의 = await 약관동의_받아오기();
	if(!약관동의) { 
		await 약관동의_팝업열기();
	}
}

*화살표 함수의 기본 구조

(arg1, args, ...) => { ... }

 

💬코드 리팩토링 V2

function QuestionPage(){
	const [openPopup] = usePopup();
	async function handleClick() {
		const confirmed = await openPopup({
			title: "보험 질문하기",
			contents: <div>전문가가 설명드려요</div>,
		});
		if(confirmed){
			await submitQuestion();
		}
	}
	async funcion submitQuestion(연결전문가){
		await 질문전송(연결전문가.id);
		alert("질문을 전송했습니다.");
	}
	return <button onClick={handleClick}>질문하기</button>;
}

 

💬출처

https://velog.io/@mari/SLASH21-실무에서-바로-쓰는-Frontend-Clean-Code-토스개발자컨퍼런스-2021

[SLASH21] 실무에서 바로 쓰는 Frontend Clean Code - 토스 개발자 컨퍼런스 2021