null 이 내부 로직에 있는 경우 왜 안좋을까?

const activeSubmitButton = () => {
  if(arr.includes(null)) {
    setSubmitButton(false)
  }else {
    setSubmitButton(true)
  }
}

이러한 코드가 레이아웃을 구성하는 React 컴포넌트 내부에 구현되어 있다.

이는 좋지 못한 코드이다. 왜 일까?

 

먼저, null은 JavaScript에서 "값이 없음"을 나타내는 특별한 값이다. React 컴포넌트의 내부 로직에 null이 들어간다면, 컴포넌트가 아무것도 렌더링하지 않는다는 의미이다.

따라서 화면에 아무런 내용도 표시되지 않을 수 있다. 만약 이렇게 될 경우, 사용자에게 텅 빈 페이지를 보여주게 되는 것일테고, 이는  UX(사용자 경험)를 저하시키는 결과를 가져올 수 있다.

또한, React 컴포넌트는 상태(state)와 속성(props)을 관리하고 다루는 데 사용된다.

null 값을 내부 로직에서 사용한다면, 컴포넌트가 관리하는 상태나 속성에 문제가 발생할 수 있다. 예를 들어, null을 통해 예상치 못한 오류가 발생할 수 있고, 컴포넌트의 동작이 예상과 다를 수 있다. 이는 잠재적인 버그나 마찬가지이다.

마지막으로, null은 보다 명확한 의미를 전달하기 위해 사용되어야 한다. 예를 들어, 조건부 렌더링을 수행할 때 null 대신 빈 배열([])이나 다른 값으로 대체할 수 있기 때문에, 굳이 null을 사용하기 보다는 코드의 가독성과 유지 보수성을 고려하여 작성하는게 좋을 것이다.

 

ChatGPT에게 비슷한 질문을 하여 얻은 답변.