watch는 반응형 콜백으로 Vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 콜백함수가 실행되는 기능입니다.

한 마디로 변수의 변화를 감지해서 값이 변경될 경우 그 변수에 매핑된 함수를 실행시키는 기능입니다.

watch 속성의 구현 코드 형식은 다음과 같습니다.

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message: function(value, oldValue) {
      console.log(value);
    }
  }
})

위 코드는 message라는 데이터에 watch 속성을 지정한 코드입니다. message라는 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터를 출력합니다.

그런데 이렇게만 사용을 할 경우 watch로 배열 형태를 감지할 때 배열 안에 내부 내용만 바뀌었을경우 watch로 배열 형태의 값을 감지할 수 없습니다. 배열 형태를 감지하기 위해서는 배열 외부의 컨테이너가 바뀌어야 watch로 감지가 됩니다.

따라서 배열 내부의 값만 바뀌어도 watch로 감지를 하기 위해서는 deep과 handler를 이용하여 해당 변수에 watch를 걸어줘야 합니다.

deep과 handler를 이용한 코드 형식은 다음과 같습니다.

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array
    },
  },
  watch: {
    colours: {
      // This will let Vue know to look inside the array
      deep: true,

      // We have to move our method to a handler field
      handler()
        console.log('The list of colours has changed!');
      }
    }
  }
}

이렇게 watch를 걸어주면 배열 내부의 데이터만 바뀌어도 watch로 해당 변수의 변화를 감지할 수 있습니다.

--force, or --legacy-peer-deps 를 추가적으로 입력 후 다시 실행하면 정상적으로 설치할 수 있다. 밑에 오류를 자세히 보면 with --force, or --legacy-peer-deps 를 통해 해결할 수 있다는 것을 알 수 있다.

예를 들어 어떠한 props Array에서 useState Array값을 set 시키기 위하여 반복문을 돌릴 때 반복문 안에서 계속 set을 할 경우 자원 낭비가 심하게 되는 경향이 있습니다.

따라서 이러한 경우 반복문 안에서 최종적으로 set을 시켜줄 Array를 리터럴 변수에 담고 그 후 반복문이 끝났을 때 set 시켜주면 같은 코드이지만 set을 1번만 진행함으로써 전혀 다른 성능을 보여줄 수 있습니다.

// Before Code

      let result = []
      setMissions([]) // 남아있는 데이터 초기화

      for(let i = 0; i < props.Array[receive_data].length; ++i){ // 계속 반복문 안에서 set 하게 됨
          setMissions(mission=>[...mission, {
            id: props.Array[receive_data][i].id,
            name: props.Array[receive_data][i].name,
              type: props.Array[receive_data][i].type,
              text: props.Array[receive_data][i].text
          }])
      }

해당 코드를 다음과 같이 리팩토링 할 수 있습니다.

// After Code

      let result = []

      for(let i = 0; i < props.Array[receive_data].length; ++i){ // set에 접근하지 않음

        let mission:MissionModel = 
        {
          id: props.Array[receive_data][i].id,
          name: props.Array[receive_data][i].name,
          type: props.Array[receive_data][i].type,
          text: props.Array[receive_data][i].text
        }

        result.push(mission) // result 빈 배열에 Data 계속 push
      }

      setMissions(result) // 최종적으로 완성된 배열 set

이러한 차이 하나하나가 프로그램을 더욱 효율적으로 동작시킬 수 있습니다.

select Tag에 useRef를 이용하여 props 데이터가 바뀔 때마다 select의 selectedIndex를 초기화 시키는 작업을 진행하였습니다.

    const presetRef = useRef(null); // select tag 상태 감시 변수

    useEffect(() => { // props 데이터가 바뀌면 동작
      if(presetRef.current) // 초기에는 값이 없으므로 값이 들어있는지 확인
      {
        presetRef.current.selectedIndex = 0 // 선택된 option의 index를 초기값인 0으로 변경
      }
    }, [props.receive_data, presetRef]) // props 데이터 및 ref 감시

이런 식으로 JSX Tag에 ref를 이용하여 Tag 상태에 접근하여 상태 값을 변경시킬 수 있습니다.

<select ref={presetRef}> {option_rendering()} </select>      

select Tag에는 다음과 같이 ref를 등록할 수 있습니다.

    const list = () => {
      let result = []

      Array_Data.map( (data, index) => {
        result.push(
          <option key={index+"_"} value={index}>{index + 1}</option>
        )
      })

      return result
    }

Array_Data 안에 있는 배열의 개수 만큼 .map으로 접근 후 loop를 돌려 result에 option 태그를 계속해서 넣어주었다. 그 후 JSX태그 안에 {list} 형식으로 넣어주면 끝이다. map의 특성상 key와 value를 요구하기 때문에 key를 넣어주었다. 없어도 된다.

                {                     
                  props.data == 0 
                  ?
                  <></>
                  :
                  <select onChange={ChangeValue}>  
                  {list()}
                  </select>
                }

option의 값을 가져올 때는 onChange 이벤트로 접근하여 해당 이벤트에 등록된 함수에서 이벤트 파라미터를 이용하여 e.target.value 형태로 값을 가져올 수 있다.

function ChangeValue(e){
      console.log(e.target.value)

      for(let i = 0; i < Array_Data[e.target.value].length; ++i){
        props.setArray(lists => [...lists, {
          id: Array_Data[e.target.value][i].id,
          name: Array_Data[e.target.value][i].name,
          count: Array_Data[e.target.value][i].count,
          type: Array_Data[e.target.value][i].type
        }])
      }
    }