useState에서 Set은 최소한으로

프로그래밍을 하다 보면 간혹 불필요한 반복을 수행하여 시스템 자원을 낭비할 때가 있습니다.

예를 들어 어떠한 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

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