React - 렌더링에서 `null` / TIL - 15

버튼을 하나의 state로 개별적으로 작동시키기 위해 해당 함수를 걸었다.

첫번째와 두번째의 차이는 selectedBtn 을 선언해서 쓰느냐 마느냐의 차이이다.

  const btnClick = e => {
    e.preventDefault();
    
    setIsClickBtn(prev => {
      return {
        ...prev,
        [e.currentTarget.getAttribute('name');]: !prev[e.currentTarget.getAttribute('name');,
      };
    });
  };

  const btnClick = e => {
    e.preventDefault();
    const selectedBtn = e.currentTarget.getAttribute('name');

    setIsClickBtn(prev => {
      return {
        ...prev,
        [selectedBtn]: !prev[selectedBtn],
      };
    });
  };

하지만 실제로 첫번째도 문제가 없어보였다고 생각을했다. 몇시간의 뻘짓끝에 너무나 안되서 멘토님에게 찾아가보았다. 밖으로 선언해서 쓰니까 동작을 한다. 왜그런지 한참을 멘토님과 같이 고민을했고 결국 무한 콘솔을 찍어보았다. 콘솔지옥에서 헤엄치며 알아본결과

  const btnClick = e => {
    // console.log(e.currentTarget, 'ct');
    // console.log(e.currentTarget.getAttribute('value'));
    // e.stopPropagation();

    const selectedBtn = e.currentTarget.getAttribute('name');

    // const outsideEvent = e;

    // console.log('outside event', outsideEvent);
    // console.log('outside currentTarget', e.currentTarget);

    setIsClickBtn(prev => {
      // const insideEvent = e;
      // console.log('inside event', insideEvent);
      // console.log('same', outsideEvent === insideEvent);

      // console.log('inside currentTarget', e.currentTarget);
      return {
        ...prev,
        [selectedBtn]: !prev[selectedBtn],
      };
    });
  };

해당 함수안에서 e.currentTarget.getAttribute('name') 을 써버리게 되면 리액트가 찰나의 순간 리렌더링 하는 과정에서 순간적으로 null 값을 반환하게 되버리는데 이순간에 값을 읽을 수 없어서 발생하는 현상이라고 결론을 지었다.

뭔가 순간적으로 원인을 앎과 동시에 개발자로서 수없이 이런과정들이 많을텐데 변수를 선언하고 할당해서 쓸생각을 못했다는것에서 씁쓸함을 느끼었고 이런 과정을 다시 만나면 함수 내부에서 위치들을 바꿔보는 습관을 길러보아야 겠다고 생각했다.