JSP만 하다가 vue로 프론트하고 있는데
List<Animal> animals를 JSON으로 직렬화한 다음에, 각 동물 타입 별로 다른 방식으로 화면에 띄우고 싶어
배열 순회하면서 `if (type === "dog") ... else if (type === "cat") ...` 이런식으로 하는 방법 말고 다른 방법은 없어?
되게 흔한 상황인거 같은데, 다들 어떻게 처리하는지 궁금함..
[
{
"type": "dog",
"name": "Buddy",
"age": 5
},
{
"type": "cat",
"name": "Ally",
"species": "Siamese"
}
]
나같은경우엔 타입스크립트 인터페이스 난도질함
인데 다른 상황이구나 ㅈㅅ
그냥 컴포넌트 맵 하나 만들듯
맵
If방식의 문제점이 뭔지를 얘기해줘야 대안을 알려주지
1. 동적 컴포넌트() + 타입 매핑으로 구현 2. 필요한 경우 Async Component로 코드 스플리팅 3. 로직 분기만 많다면 Type Guards 또는 패턴 매칭 라이브러리 활용
ts-pattern or 매핑
let animal_func={ dog:()=>{/*대충 코드*/}, cat:()=>{/*대충 코드*/} } animals.forEach(e=>animal_func[e.type]()); 이런식으로 객체함수 만들고 문자열을 키값으로 줘서 함수로 처리함
이건 좀 고수인데 - dc App