[TIL] Switch (feat. tanstack table)

 

 

 

 

수기로 하나하나 이렇게 만들었던 목록이 있었다.

이걸 tanstack table을 사용하면서, 값을 뿌려주는 형태로 쓰고 싶어서 만들게 됨

 

저 부분의 column은 이런식으로 작성이 된다.

 

	columnHelper.accessor("issueState", {
		header: "상태",
		cell({ row }) {
			const { original } = row;
			return original.issueState === 1110100
				? "요청"
				: original.issueState === 1110101
				? "진행"
				: original.issueState === 1110102
				? "완료"
				: original.issueState === 1110103
				? "재요청"
				: "";
		},
     )

원래는 값을 받아오면, 그에 맞는 셀에 저 한글을 넣어주는 방식이었는데, 뭔가 심심한 느낌..

그래서 따로 파일을 하나 생성해줌

 

global.css

	.state_css_1110100 {
		@apply block  w-1/12 text-sm font-semibold text-center mx-5 rounded-lg bg-point-color;
	}
	.state_css_1110101 {
		@apply block  w-1/12 text-sm font-semibold text-center mx-5 rounded-lg bg-green-300;
	}
	.state_css_1110102 {
		@apply block  w-1/12 text-sm font-semibold text-center mx-5 rounded-lg bg-red-300;
	}
	.state_css_1110103 {
		@apply block  w-1/12 text-sm font-semibold text-center mx-5 rounded-lg bg-blue-300;
	}

 

IssueStateIcon.tsx

export default function IssueStateIcon({
    key,
    value,
    list,
}: {
    key: string;
    value: number;
    list: any;
}) {

    {
        list.map((e: any) => (
            <div key={key} className={state_css_${value}}>
                {e.name}
            </div>
        ));
    }
}

 

tableColumns.ts

columnHelper.accessor("issueState", {
		header: "상태",
		cell({ row }) {
			const { original } = row;
			const state = original.issueState;
			const test: any = [
				{ value: 1110100, name: "요청" },
				{ value: 1110101, name: "진행" },
				{ value: 1110102, name: "완료" },
				{ value: 1110103, name: "재요청" },
			];
			return IssueStateIcon({ key: "state" + original.id, value: state, list: test })
		},
}),

나는 각각의 value에 맞는 name이 달라 요전에 필터 했던 것처럼

map을 돌았는데 생각해보니 map을 돌아도 서로의 값을 비교해 줄 수가 없는 노릇이어서, 소용이 없던 것이었다.

 

그래서 쓰기로 한것이 Switch문! 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/switch

switch - JavaScript | MDN

var foo = 5;
switch (foo) {
  case 2:
    console.log(2);
    break; // it encounters this break so will not continue into 'default:'
  default:
    console.log('default')
    // fall-through
  case 1:
    console.log('1');
}

예시로 이런식으로 쓰면 된다.

그래서 한번 해보기로 함..

 

 

IssueStateIcon.tsx

export default function IssueStateIcon({ value }: { value: number }) {
	switch (value) {
		case 1110100:
			return <div className={`issue_state_${value}`}>요청</div>;
		case 1110101:
			return <div className={`issue_state_${value}`}>진행</div>;
		case 1110102:
			return <div className={`issue_state_${value}`}>완료</div>;
		case 1110103:
			return <div className={`issue_state_${value}`}>재요청</div>;

		default:
			return null;
	}
}

 

 

tableColumns.ts

columnHelper.accessor("issueState", {
		header: "상태",
		cell({ row }) {
			const { original } = row;
			const state = original.issueState;
			return IssueStateIcon({ value: state });
		},
	}),

 

근데 이게 또 되는 거 같더니 갑자기 안되기 시작..

 

switch (value) {
        case 1110100:
            return <div className="issue_state_1110100">요청</div>;
        case 1110101:
            return <div className={issue_state_${value}}>진행</div>;

위에 처럼 하면 되고 밑에 처럼 하면 안 되더라..

 

 

class는 똑같이 먹혔는데.. 왜 안되는지 답답할 따름 ㅎ_ㅎ

근데 사실 저부분을 동적처리해줄 이유가 없기 때문에, (다 각기 조건문을 달아서)

그냥 숫자로 바꿔 주었다

근데 이유가 너무 궁금해 ㅠ_ㅠ