Intro

셀렉트박스에 숫자 선택 시 그 숫자만큼 행을 동적으로 생성시키면 된다.

problem

동적으로 행을 생성하려면 map함수를 사용하는 것이 일반적인것 같다. 하지만 map을 이용하려면 리스트를 사용하여야하는데 내가 이용하는 데이터는 숫자이다.
아래의 데이터의 key값을 numberOfPeople이라고 해보자.

// 1을 선택하면 
numberOfPeople : 1
// 2를 선택하면 
numberOfPeople : 2
        .
        .
        .

이런식으로 값이 넘어온다.

이 문제 때문에 시간이 걸렸지만 해결방안은 index값을 넘겨주어 그 값으로 리스트를 만들어서 map함수에서 사용하는 것이다!

코드

부모

const parent = (props) => {
  const [formData, setFormData] = useState({
        numberOfPeople : null, // db에서 데이터가 넘어옴. 1,2,3..이런식으로
        numberOfPeopleList : [] // 위의 숫자만큼 값을 담을 빈배열
    })
  
  // numberOfPeople 값이 변할 때 마다 numberOfPeopleList에 새로운 배열 생성
  // 2 선택 시 [0,1]
  // 5 선택 시 [0,1,2,3,4]
  useEffect(() => {
        formData.numberOfPeopleList = [];
        for (let i= 0; i < formData.numberOfPeople; i++) {
            formData.numberOfPeopleList.push(i)
        }
    }, [formData.numberOfPeople]);
  
  // 이벤트 핸들러
  const onChangeHandler = useCallback((name, event, idx) => {
        let value = event.value;
        switch (name) {
            case "numberOfPeople":
                value = (value.numberOfPeople != null ? value.numberOfPeople : "")
                break;
            default:
                break;
        }
        setFormData(prevState => ({
            ...prevState,
            [name]: value
        }));
    }, [formData]);
  
   return (
        <Fragment>
           {
               formik => {
               return (
                 <Form className={"form"} onSubmit={formik.handleSubmit} ref={formRef}>
     				// kendo를 사용
                     <table>
                       <div>
                         <kendo-dropdownlist
                                [data]="["1", "2", "3", "4", "5"]"
                         ></kendo-dropdownlist>
                       </div>
                     </table>
                      <div>
                          <div>
                             // numberOfPeopleList의 리스트 값으로 map
                            {formData.numberOfPeopleList.map((index)=>(
                              <div key={index}>
                              <ListItem idx={index}
                                        onChangeHandler={onChangeHandler}
                                        /> 
                              </div>
							))}
                          </div>
					</div>	
                     
     			 </From>
               )
			}
			}
     
     	</Fragment>
     )
}

자식

const child = (props) => {
    return (
            <Fragment>
                <div>
                  	<div>
                      <Input
                            name={"numberOfPeople"}
							// onChangeHandler로 값을 선택 할 때 이벤트 핸들러가 발생
                            onChange={(event) => props.onChangeHandler("numberOfPeople", event, props.idx)}
                        />
            		</div>
                </div>
            </Fragment>
    );
};