[TIL] 240220(화) Optional Chaining이란?

const [letters, setLetters] = useState(null);

  const fetchLetters = async () => {
    const { data } = await axios.get("http://localhost:4000/letters");

    setLetters(data);
  };

  useEffect(() => {
    fetchLetters();
  }, []);

컴포넌트가 렌더링이 처음 됐을 때, 비동기 함수가 실행되기 이전에 map이나 filter 함수가 먼저 호출된다.
따라서 letters에 아무 데이터가 들어있지 않는다면, 해당 데이터를 읽어 올 수 없으므로 오류가 난다.

async보다 map 또는 filter 함수가 먼저 돌아간다.

Error가 난 LetterList로 들어가보면, filter와 map 함수가 실행이 되고 있었다.

이때 ? : optional chaning 을 사용하여 함수 실행 오류를 막아준다.

import { useContext } from "react";
import LetterItem from "./LetterItem";
import { Context } from "context/Context";

function LetterList({ writedTo }) {
  const { letters } = useContext(Context);

  const filteredLetters = letters?.filter((letter) =>
    writedTo ? letter.writedTo === writedTo : true
  );

  return (
    <div>
      {filteredLetters?.map((item) => {
        return <LetterItem key={item.id} item={item} />;
      })}
    </div>
  );
}

export default LetterList;

📌 Optional Chaining(?) 이란?

Optional chaining (?.) 연산자는 객체의 속성에 접근하거나 함수를 호출하는데 사용된다.
이때 ? 연산자를 사용하여 접근한 객체나 호출한 함수가 undefined 또는 null일 경우, 오류를 발생시키지 않고, short circuit(단축 평가)을 발생하여 undefined를 반환한다.

따라서, 코드에서 객체나 함수에 안전하게 접근할 수 있으며, 해당 객체나 함수가 존재하지 않는 경우에도 코드가 오류를 발생시키지 않고 정상적으로 작동할 수 있다.