이런 식으로 필터 제목에 따라 다른 드롭다운 메뉴가 나오게 하고 싶었다.
필터 제목 컴포넌트도 이미 이렇게 BoardBody라는 json 파일에 있는 배열을 map해서 만든 거라, 각 필터 제목에 맞는 드롭다운 메뉴들도 map을 하면 나중에 데이터가 바뀌어도 유지보수하기가 편할 것 같아서(일일이 하드코딩하는 것보다) map을 시도해 봤다.
이런 식으로 switch-case문을 이용해 각 필터 제목에 따라 다른 드롭다운 아이템 배열이 dropdownItems이라는 변수에 할당되도록 하고, 그 배열을 map하려고 했는데...
map을 이중으로 사용하는 게 원래 복잡한 건지 내 실력이 부족해서 그런지 모르겠지만(아마 실력 부족 때문이겠지!) 자꾸 에러가 나고 너무 복잡하고 어려워서 switch문 안에서 각 필터 제목에 맞는 드롭다운 메뉴 항목들을 직접 다 입력하기로 했다.
(jsx 안에서 {}를 쓰고 중괄호 안에 그냥 switch문을 썼는데 입력이 제대로 안 돼서 구글링을 했더니 익명 함수 안에서 switch문을 쓰라고 해서 그렇게 했다.)
switch문을 실행했더니 위와 같은 에러가 났다.
참고로 map을 시도했을 때도 Functions are not valid as a React child 에러는 계속 있었다. map으로 인한 에러가 더 눈에 들어왔을 뿐이다.
위의 에러메시지 내용처럼, 함수는 react child가 될 수 없으므로 위에서 정의한 함수(switch문이 담긴)를 즉시실행해야 함수가 아닌 컴포넌트를 리턴할 수 있어서 익명함수 선언문 옆에 ()를 썼다.
이렇게 즉시실행되도록 익명함수 옆에 ()를 적었더니 에러가 사라지고 잘 작동한다.
switch-case문을 jsx안에서 실행하는 방법은 A Case to Switch. Using Switch Statements in React.라는 medium 포스팅을 참고했다.
