[TIL]22.02.23 - operator, 배열안의 객체 값 수정

코드리뷰는
누군가 내코드를 보고 리뷰를 해준다는게 긴장되면서도,
내가 어떤 코드습관이 있는지, 어떻게 사고력을 가져야 좋을지 자각할수 있는 좋은 문화인것 같다.
오늘은 특히 정규표현식에 애를 많이 먹었다. 봐도봐도 익숙해지지 않는다.

오늘 한일

• 스튜디오 페이지 완료(api연동 및 예외처리)
• Node.js학습

오늘 배운것

• Optional chaining
  
  옵셔널 체이닝 ?.  을 사용하면 프로퍼티가 없는 객체를 에러없이 가져올수 있는데 ?.의 '앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 
  프로퍼티에 대한 비동기 처리로 이전프로젝트에서도 값이 할당되기 전에 렌더링되어 에러가 발생하는 상황이 자주발생하여 옵셔널체이닝을 거의 무지성으로 작성했고, 이게 맞나 싶을정도로 남용해서 정확히 어디가 문제인지 파악하는데 어려움을 겪고, 현 작업에서는 그럴만한 데이터나 관리할 상태값도 적어서 최대한 지양하면서 작성했다
  하지만 코드리뷰를 받으면서  앱환경에서 많은 에러를 뿜어내서 남용하는 것은 좋지는 않지만 존재하지 않아도 괜찮은 대상에만 사용해주는 것이 좋다는 피드백을 받았다.앱환경에서 많은 에러를 뿜어내서
  
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
  
  
• 원본배열에 값을 받아서 객체안의 값을 변경하고싶을때
  
  API를 연동하면서 서버에서 받아온 객체안의 URL주소를 
  기존에 useState로 관리하던 상태 배열안에 있는 객체에 수정해야 했다.  키값이 같을경우는 아래와같이 사용
  
  

  const [optionContents, setOptionContents] = useState([
      {
        id: 'IR_INTERVIEW',
        value: '7,000,000원 부터',
        title: 'IR영상(인터뷰)',
        active: true,
        url: 'https://video.confin.live/startups/confin/confin-video-video-GH3KQUNJ_SD.mp4',
      },
      
      ...
      ]
      
    //url 수정
    const setOptionList = optionContents.map((item, idx, src) => {
      for (let i = 0; i < src.length; i++) {
        if (idx === i) {
          return { ...item, url: optionList[i]?.url ?? item.url };
        }
      }
      return item;
    });

  
  키값이 다를경우 인덱스에 해당되는 값을 찾아 수정해주었다
  
  

  const setCountList = countList.map((item, idx) => {
      if (idx === 0) {
        return { ...item, count: outPutCount?.videos ?? item.count };
      }
      if (idx === 1) {
        return { ...item, count: outPutCount?.fund ?? item.count };
      }
      if (idx === 2) {
        return { ...item, count: outPutCount?.videoCount ?? item.count };
      }
      return item;
    });

  
  
• Nullish coalescing operator
  
  널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 예외처리로 null또는 undefined를 여러개 사용하는 습관이 있었는데 자주 사용할것 같다.
  
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
  

Optional chaining
옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.
옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.

Optional chaining - JavaScript | MDN

Nullish coalescing operator - JavaScript | MDN

• 에러 : react Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array
  
  습관적으로 사용하는 코드습관이 있는데 useEffect에서 렌더링하면서 데이터를 받는상황에서 이런 코드를 자주작성했다. 디펜던시에 빈배열을 넣을경우 다음과 같은 에러가 발생하는데, 무한루프를 방지하기 위해 빈배열만 넣어도 문제는 없지만 디펜던시에  dispatch를 추가할경우 에러가 사라진다.

useLayoutEffect(() => { dispatch(studioActions.getStudioData()); }, [dispatch]);

https://stackoverflow.com/questions/69626948/react-hook-useeffect-has-a-missing-dependency-dispatch-either-include-it-or

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhausti

내일 할일

• 스튜디오 페이지 완료( 반응형작업 및 예외처리 )
• Node.js학습