[TIL] 옵셔널 체이닝(Optional Chaining)이란

프로그래밍 언어에서 특정 값이나 객체가 존재하는지 확인하고, 존재할 때만 그 값에 접근하는 방법.

 

api로 회원 정보를 가져와서 MyProfile에 가져온 닉네임을 띄우려 했으나

해당 페이지를 새로고침하면 데이터가 다 날라가버리는 현상이 일어났다.

 

// 문제 로직

//생략

function MyProfile() {
  const { userData, setUserData } = useContext(ListContext);
  const [nickname, setNickname] = useState('');


  return (
    <>
      <Layout />
      <DetailContainer>
        <StImg></StImg>
        <StProfileButton>프로필 변경</StProfileButton>
        <StNickName value={userData.nickname}
        onChange={(e)=>setNickname(e.target.value)}/>
        <StProfileButton>닉네임 변경</StProfileButton>
      </DetailContainer>
    </>
  )
}

//생략

 

userData가 api에서 가져오는 데이터인데

새로고침하면 일시적으로 데이터가 없는 것으로 나오다보니

userData.nickname도 불러올 수 없는 것이었다.

 

이때 옵셔널체이닝을 사용하여 해결했다.

 

// 수정한 코드

// 생략

   <StNickName value={userData?.nickname}

// 생략

 

새로고침 시 userData가 일시적으로 없어도 오류를 내지 않고

데이터를 갖고 올 수 있도록 함으로써 해결됐다.