[React.ts] 객체 리터럴을 이용한 조건문 줄이기

Front End 를 개발할 때 같은 공간의 컴포넌트 안에서 특정 값에 따라 화면이 바뀌는 분기 처리가 필요했었는데

기존엔 if 문이나 switch,  input === "A" && <></> 등으로 처리해줬었다.

해당 방법은 분기가 하나 추가되거나 삭제될 때 마다

해당 분기가 들어간 코드들을 다 찾아가서 수정해줘야 하는 유지보수가 굉장히 안좋은 코드였다.

수정 전

<div>
	{ status === "create" && <Create /> }
	{ status === "update" && <Update /> }
	{ statue === "delete" && <Delete /> }
</div>

 

 

그런데 위 처럼 노가다성 짙은 코드를 쓸 필요 없이 객체 리터럴을 활용해서

내부 프로퍼티를 호출할 때 [Key String] 을 사용하면 아래처럼 코드를 수정할 수 있다.

수정 후

const editComponentMap = {
	"create" : <Create />
	"update" : <Update />
	"delet" : <Delete />
} as { [key: string]: React.ReactElement };

<div>
	{ editComponentMap[status] }
</div>

 

함수를 호출하는 코드도 아래처럼 구현이 가능하다.

const editMap = {
	create() {
		createUser();
	},
	update() {
		updateUser();
	},
	delete() {
		deleteUser();
	},
}

function executeEditMap(status: string) {
	editMap[status]();
}

executeEditMap(status);