Optional-Chaining, Nullish-Coalescing, props

Optional-Chaining

• ?.를 사용하여 값이 있는지 판단 후 없으면 undefined로 반환
• data && data.fetchProfile => data?.fetchProfile 로 적용가능
• data || data.fetchProfile (거짓일 경우 데이터가 없으면 렌더링)
  거짓 표기 : 0, '' or "", false, null, undefined, NaN

Nullish-Coalescing

• data??data.fetchProfile
  ↑ = null, undefined일때만 사용됨 (자주 사용x)

ex)
null ?? "훈이입니다"
// '훈이입니다'

undefined ?? "훈이입니다"
// '훈이입니다'

0 ?? "훈이입니다"
// 0

Props

• 부모컴포넌트가 자식컴포넌트에게 물려주는 변수/함수

• Container안 부모와 자식 컴포넌트를 나눠서 불러올 때 useState가 사용이 안되기 때문에 import로 사용하려는 컴포넌트 명을 넣어 준 후 불러올 컴포넌트의 경로를 추가해 준다

부모컴포넌트 :

<자식컴포넌트태그 aaa={handleChangeWriter}>

자식컴포넌트 :
import 자식컴포넌트명 from '자식컴포넌트의 경로'

export default function 자식컴포넌트(props) {
  <input onChange={props.aaa} />

// aaa는 객체
}

의 식으로 작성하여 적용시켜 준다

---

리액트의 구조

• 데이터의 흐름이 단방향 구조(자식이 부모에게 데이터를 줄 수 없음)

앵귤러의 구조

• 데이터의 흐름이 양방향 구조(자식이 부모에게 데이터를 줄 수 있음)

---