-
? / ?? 리액트 타입스크립트 props 전달할때 optional Chaining & null CheckReact/React+TypeScript 2023. 2. 21. 20:37
📌 지난 시간 리액트 타입스크립트 기반으로 props 를 전달해주는 방법을 배웠다.
optional chaining 은 해당 prop은 전달되지 않을 수도 있다는 표현을 해줄 때 사용한다.
personobj.name 은 .(chaining)
personobj?.name 은 ?.(optional chaining) 이 된다.
즉 왼쪽 값이 비어있다면 해당 코드를 undefined 처리하라는 것과 같다.
아래 코드에서 추가로 보면
// interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age? : number // 🔥age가 비어있을 수도 있다. 라는 것을 암시한다. //age : number | undefined 로 쓸 수도 있다. } // 이런 경우 age 의 default 값을 설정해줄 수 있는데 다음과 같다. (27이 default 값) const SayHello = ({name, age = 27} : personobj) =>{ return( <div>sayHello {name} you are {age ?? 3}</div> //다음과 같이도 처리가 가능하다. //중괄호 안에 ?? 3 이란 age 가 undefined , 즉 비었다면 3으로 처리해라 라는 소리다. ) } function App() { return <> <SayHello name={"woony"} /> // age가 전달되지 않아도 에러가 나지 않는다. </> }
optional chaining , null check 여러가지로 불리는 것 같다.
'React > React+TypeScript' 카테고리의 다른 글
TypeScript 기반 React 시작하기 with Styled-Components (0) 2023.02.23 리액트 타입스크립트 스타일컴포넌트 Theme 적용하기 (0) 2023.02.22 React+TypeScript Form 형식을 공부해보자! (0) 2023.02.22 React + TypeScript 에서 props 전달하는 법 with styled-components (0) 2023.02.21 타입스크립트로 리액트 시작하기 + 기본 문법 (2) 2023.02.18