[ React / Select ] Select의 defaultValue 를 state를 이용하여 동적 변경 시키기.

 

❗️ 이슈 발생

React 프로젝트를 작업 중에 데이터 리스트를 state로 관리해서 필터링 옵션을 선택할 때마다 데이터 리스트를 동적 필터링 구조로 작업 중에 일반 텍스트 데이터들은 동적 필터링 기능이 잘 적용되는데, Select의  defaultValue는 이전 데이터 값을 갖고 동적 필터링이 적용되지 않는 이슈가 발생하였다. 

 

 

 

예시 코드

import React, {useState, useEffect} from 'react';
// UI Library는 Antdesign을 사용.
import { Select } from 'antd';
const { Option } = Select;


const data = [
 {name: "Lee", isStudent: false},
 {name: "Kim", isStudent: true},
 {name: "Park", isStudent: true},
 {name: "Oh", isStudent: false}
];


const MainPage = () => {
  const [listData, setListData] = useState([]); // data state
  
  useEffect({
  	setListData(data); // 최초 1회 data를 listData state에 넣어준다.
  } ,[])
 
 
    const columns = [ // table에서 사용할 columns
        {
          title: "이름",
          dataIndex: "name",
          align: "center",
          width: "80%",
          key: "name",
        },
        {
          title: "나이",
          dataIndex: "age",
          align: "center",
          width: "20%",
          key: "age",
          render: (value) => (
               <Select
                defaultValue={value}
                onChange={onChange}
              >
                <Option value={true}>학생</Option>
                <Option value={false}>일반인</Option>
              </Select>
            );
        },
    ];
  
  
  function onChangeOption(value){ // Radio 옵션을 변경할때마다 발생할 필터링 이벤트. 
     switch (value) {
      case "all":
        return setListData(data);
        break;
      case "student":
        const filterStudents = data.filter((item) => {
          return item.isStudent === true;
        });
        return setListData(filterStudents);
        break;
      case "ordinary":
        const ordinaryPerson = data.filter((item) => {
          return item.isStudent === false;
        });
        return setListData(ordinaryPerson);
        break;
        };
    };
  
  
  return (
  	<div>
    	<Radio.Group
          defaultValue="all"
          onChange={(value) => {
            onChangeOption(value.target.value);
          }}
        >
          <Radio value="all">전체</Radio>
          <Radio value="student">학생</Radio>
          <Radio value="ordinary">일반인</Radio>
        </Radio.Group>
        <Table
            dataSource={listData}
            columns={columns}
          />
    </div>
  )
};

export default MainPage;

 

 

대략 위와 같은 구조로 라디오 버튼으로 옵션을 선택하면, 원본 데이터 리스트를 필터링하여  리스트 데이터 state에 필터링된 결과물을 넣어주고, Table에서는 필터링된 데이터 리스트 state를 보여주는 구조로 만들어져 있었다.

 

 

학생과 일반인을 구분하는 Radio 버튼.

 

Radio버튼을 누르면 전체 / 학생 / 일반인이 필터링 된다.

 

 

 

그런데 테이블의 "이름"(단순 텍스트 형태)의 경우, 데이터 리스트가 동적으로 필터링되며 잘 구현되었지만, "나이"(select의 default value로 기본값이 노출됨)의 경우는 defaultValue가 이전 데이터 리스트 state의 값을 보여주고 있었다.

 

이유는 모르겠지만, default value를 state로 받게 해도, 콘솔에는 분명히 새로운 state데이터가 찍히는데 ui에서는 여전히 이전 데이터가 나오고 있었다. state에 변화를 감지하여 useEffect로 넣어주어도 마찬가지.. 

 

그래서 결국 해결 방법은 Select의 default value가 아닌 value를 사용하여, 초기 데이터에서 받아오고 Select의 onChange 이벤트를 통해 value 값을 동적으로 바꿔주는 이벤트를 추가하였다.

 

 

 

 

---

 

 

 

 

해결 예시 코드

import React, {useState, useEffect} from 'react';
// UI Library는 Antdesign을 사용.
import { Select } from 'antd';
const { Option } = Select;


const data = [
 {name: "Lee", isStudent: false},
 {name: "Kim", isStudent: true},
 {name: "Park", isStudent: true},
 {name: "Oh", isStudent: false}
];


const MainPage = () => {
  const [listData, setListData] = useState([]); // data state
  const [ selectValue, setSelectValue] = useState('');
  
  useEffect({
  	setListData(data); // 최초 1회 data를 listData state에 넣어준다.
  } ,[])
 
 
    const columns = [ // table에서 사용할 columns
        {
          title: "이름",
          dataIndex: "name",
          align: "center",
          width: "80%",
          key: "name",
        },
        {
          title: "나이",
          dataIndex: "age",
          align: "center",
          width: "20%",
          key: "age",
          render: (item) => {
          	if(value === ''){
            	setSelectValue(item);
            }
               return <Select
                value={selectValue}
                onChange={(v) => { 
                	setSelectValue(v.tartget.value);
                }}
              >
                <Option value={true}>학생</Option>
                <Option value={false}>일반인</Option>
              </Select>
            };
        },
    ];
  
  
  function onChangeOption(value){ // Radio 옵션을 변경할때마다 발생할 필터링 이벤트. 
     switch (value) {
      case "all":
        return setListData(data);
        break;
      case "student":
        const filterStudents = data.filter((item) => {
          return item.isStudent === true;
        });
        return setListData(filterStudents);
        break;
      case "ordinary":
        const ordinaryPerson = data.filter((item) => {
          return item.isStudent === false;
        });
        return setListData(ordinaryPerson);
        break;
        };
    };
  
  
  return (
  	<div>
    	<Radio.Group
          defaultValue="all"
          onChange={(value) => {
            onChangeOption(value.target.value);
          }}
        >
          <Radio value="all">전체</Radio>
          <Radio value="student">학생</Radio>
          <Radio value="ordinary">일반인</Radio>
        </Radio.Group>
        <Table
            dataSource={listData}
            columns={columns}
          />
    </div>
  )
};

export default MainPage;

 

 

이런 식으로 select의 default value가 아닌 value로 기본값을 설정해주면 option으로 value값을 바꿔주어도 state의 select value가 변하지 않았기 때문에 변경되지 않는다. 그래서 selectValue state를 만들어주어, selectValue state 값이 초기값 일 때만 default value로 데이터에서 받아온 값을 넣어주는 if문을 추가해주고, option을 변경할 때마다 setSelectValue 이벤트를 통해 변경된 selectValue값을 넣어주었다.

 

왜 select의 default value가 동적으로 동작하지 않는지 더 찾아보고 정리하여 추가해야겠다.