현재 클릭한 칸의 줄 수(rowIndex)는 반드시 0부터 9 사이에 있어야 합니다. 따라서 data[rowIndex]가 undefined 될 일은 없습니다. 그래서 옵셔널 체이닝 연산자(?.)를 붙일 필요가 없습니다. 그런데 data[rowIndex - 1]은 rowIndex가 0이면 data[-1]이 됩니다. 이때는 undefined가 되므로 data[rowIndex - 1][cellIndex]를 하면 에러가 납니다. 따라서 ?.를 넣어 data[rowIndex - 1]이 undefined가 되는 상황에 에러가 발생하는 것을 막습니다. data[rowIndex + 1]도 마찬가지로 rowIndex가 9(맨 아랫줄)이면 data[10]이 되어 undefined가 되는 상황입니다. 그래서 이 경우에도 ?.를 넣었습니다.

그러면 맨 왼쪽 줄과 맨 오른쪽 줄은 왜 보호하지 않을까요? 맨 왼쪽 줄을 클릭하면 cellIndex는 0이 됩니다. 이때 data[rowIndex][cellIndex - 1]은 data[rowIndex][-1]이므로 알아서 undefined가 됩니다. 따라서 따로 보호할 것이 없습니다. data[rowIndex]가 undefined 되면 문제가 되지만, data[rowIndex][cellIndex]가 undefined 되면 에러가 발생하지 않습니다(옵셔널 체이닝 연산자에 관해 기억나지 않는다면 2.6.3절의 중첩된 객체와 옵셔널 체이닝 연산자 부분을 다시 공부해 보세요).