일일회고 start!!
✔︎ 알게된것
1. react.Suspense
- 일반적으로는 loading spinner 등을 만들 때 사용한다.
<Suspense fallback={<Loading/>}>
<Component />
<Suspense>- 이런식으로 특정 컴포넌트를 감싸서 그 컴포넌트의 렌더링이 완료되기 이전에 원하는 동작(로딩바 만들기 등)을 수행할 수 있다.
- 다만 리액트 공식 문서에서는 위 사항만이 유일한 유즈케이스라고 설명하고 있다. (Today, lazy loading components is the only use case supported by <React.Suspense>)
react-i18next를 사용할 경우 default로 Suspense를 사용하고 있다. 사용하지 않으려면 i18n config에서 react:useSuspenseflag를 false로 설정해주면 된다고 한다.
//Example config
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: "en",
debug: true,
resources: {
},
interpolation: {
escapeValue: false,
},
react: {
wait: true,
useSuspense: false, // 이런식으로!
},
})2. react에서 map() 사용시 key로 배열의 index 적용 할 때 문제점
- 리액트에서 map()으로 컬렉션을 렌더링할때, 리액트가 해당 element를 식별 할 수 있는 유일한 방법이 id. 따라서 id는 고유해야한다.
- 그런데 index를 사용한 상황에서 만약 중간 element를 삭제하거나 순서가 수정된다면 잘못된 결과를 렌더링 하게 될 수 있다.
- 즉, static 한 item이라 단순한 나열성을 갖고, 딱히 id 값이 없으며, 순서가 바뀌지 않는다면 index를 key로 사용해도 괜찮다고 한다.
3. Nullish coalescing operator (널 병합 연산자)
- 왼쪽 값이 null 이나 undefined 일때만 오른쪽 값을 반환한다.
- null, undefined가 들어왔을때 명확한 값으로 처리하는 것이 목적이다.
let this_is_null = null;
let answer = this_is_null ?? "yes"; // yes- OR 연산자
||를 사용할 때와 다른점
-||는 왼쪽의 값을 자동으로 f/t로 형변환을 하는 반면,??는 왼쪽 값이 확실하게 null, undefined 일 때만 처리한다.
let myText = ''; // An empty string (which is also a falsy value)
let notFalsyText = myText || 'Hello world'; // 답 : Hello world
let preservingFalsy = myText ?? 'Hi neighborhood'; // 답 : '' 🐾 Reference
잘하진 않지만 포기하진 않을거햐