[React] input을 이용한 리스트 추가

 

  let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈'])
  let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일'])
  let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed'])

 

 

역시나 마찬가지로 리스트로 사용할 state를 작성한 후

 

이번엔 input text박스에 글을 입력했을 시 배열을 추가해서

리스트 맨앞에 생성되게 해보자

 

        <input className="input-text" type='text'></input>
        <button  className="input-btn" 
        onClick={() => {
          let input_text = document.querySelector('.input-text');
          if (input_text.value !== '' ) {
          let new_arr = [...player_name];
          new_arr.unshift(input_text.value);
          setplayer_name(new_arr);
          }
        }}>입력</button>

 

input과 button 생성후

button 태그에 onClick함수로

input에 입력될 value값을 player_name 배열앞에 추가해주면

성공적으로 배열에 추가되긴 했지만

다른 배열의 생년월일과 주력으로 사용하는 발의 위치 배열이 추가 안됐기 때문에

한칸씩 앞으로 당겨져 디아즈의 출생이 미궁속으로 빠지게 됐다

 

의도하는 기능은 추가됐지만

마음에 안든다.

 

어떻게 할지 고민하다가

자바스크립트에서 배웠던

split함수를 이용해

input의 value를 띄어쓰기로 구분한후 새로운 배열에 넣어주고

그 배열의 i번째 요소들을

각각에 해당되는 state배열맨앞에 같은원리로 삽입한다.

 

        <button  className="input-btn" 
        onClick={() => {
          let input_text = document.querySelector('.input-text');
          let input_arr = [];
          if (input_text.value !== '' ) {
            input_arr = input_text.value.split(' ');
            console.log(input_arr)
          let new_arr = [...player_name];
          new_arr.unshift(input_arr[0]);
          setplayer_name(new_arr);
          let new_arr_1 = [...player_age];
          new_arr_1.unshift(input_arr[1]);
          setplayer_age(new_arr_1);
          let new_arr_2 = [...footed];
          new_arr_2.unshift(input_arr[2]);
          setfooted(new_arr_2);

          input_text.value = '';
          }
        }}>입력</button>

 

split으로 띄어쓰기 기준으로 구분하고

player_name / player_age / footed

각 배열앞에 unshift로 하나씩 추가해준다!