React select 연동

두개의 셀렉트 박스를 연동하려고 하는데  

 

첫번째 셀렉트박스에서  시, 도 를 검색하면 

두번째 셀렉트박스에서 상세 지역이 나오는 로직이다. 

 

 

 

 

 

내가 해결해야할 문제

1. 각 셀렉트에 노출될 리스트들이 오브젝트로 되어 있다. 

2. 첫번째 셀렉트 값에 따라 두번째 셀렉트 박스 값이 변경되어야 한다. 

3. 검색 버튼 클릭시  첫번째 셀렉트, 두번째 셀렉트 값을  다른 컴포넌트로 전송해 주어야 한다. 

 

 

 

1. 각 셀렉트에 들어갈 값들이 오브젝트로 되어 있다. 

이걸 써먹으려면 코드 키를  태그의 벨류로 넣고  키값을 셀렉트 박스에 보여줘야한다. 

 내가 선택한 방식은 

const [z1List, setZ1List] = useState<string[]>([]);
 
  useEffect(() => {
    const arr = [];
    for (const [key, value] of Object.entries(szcode)) {
      arr.push(`${key}:${value}`);
    }
    setZ1List(arr);
  }, []);

 키와 키값을 배열로 만들어서  state에 넣어두었다. 

그런 다음 배열에 map 을 돌려서 

각각 값을 넣어줬다. 

 

 	<select>
       <option value="none">=1차분류=</option>
        {z1List.map((item, i) => (
         <option value={item.split(':')[0]} key={i}>
         {item.split(':')[1]}
          </option>
              ))}
    </select>

 

 

이러면 첫번째 문제해결.

 

 

2. 첫번째 셀렉트 값에 따라 두번째 셀렉트 박스 값이 변경되어야 한다. 

 

첫번째 값을 Z1 이라는 state에 저장한 뒤  키의 앞 두글자 로 필터링 했다. 

  const z2ListHandler = (e: any) => {
    setZ1(e.target.value);
    const arr = [];
    for (const [key, value] of Object.entries(szscode)) {
      if (key.slice(0, 2) === e.target.value) {
        arr.push(`${key}:${value}`);
      }
    }
    setZ2List(arr);
  };

이러면 두번째도 해결됨 

 

 

 

3. 검색 버튼 클릭시  첫번째 셀렉트, 두번째 셀렉트 값을  다른 컴포넌트로 전송해 주어야 한다.

 

 이 값들을 검색결과 페이지로 넘겨줘야 하는데

프롭스 드릴링 하기에는 너무 먼 자식이라..

 

리덕스 툴킷을 사용해서 dispatch 하였다. 

 

세번째 문제도 해결