-
React 유용한 Tip 3가지 모음Tip 2022. 1. 18. 14:36728x90
1. React props 간편하게 전달하기
react의 compoent를 생성한 뒤 props를 전달하다 보면 반복된 내용을 쓰게 되는 경우가 많다.
const {title, name, contnets} = data; const onOtherNameFunc = () => alert('Click!'); // bad <Component title={title} name={name} contents={contents} onClick={onOtherNameFunc} /> // good <Component {...{title, name, contents}} onClick={onOtherNameFunc} />
2. Map props 효율적으로 전달하기
map을 사용할 때 하나의 id와 같은 하나의 props를 위해 구조 분해 할당을 하기에는 번거로울 때가 있다.
// bad {list.map((data) => ( <Components {...data} key={data?.id} /> ))} // good {list.map(({ id, ...listData }) => ( <Components {...{ id, ...listData }} key={id} /> ))}
3. 객체나 배열에 조건부 할당하기
객체나 배열을 생성할 때 한 가지 정도가 조건에 따라 할당되거나 변경되는 경우 가 많은데 그 경우 분기를 통해 아예 다시 생성하는 경우가 많다.
// bad let data = { id, title, contents, }; if(custom) data.type = 'custom' if(status) data.status = 'good'; // good const data = { id, title, contents, ...(custom && {type : 'custom'}), ...(status && { status: 'good' }), };
'Tip' 카테고리의 다른 글
'Window & typeof globalThis' 형식에 '*' 속성이 없습니다. ts(2339) 해결하기 (0) 2022.02.08 JS 유용한 Promise활용 (0) 2022.02.03 Redux Toolkit Dependency cycle Error (0) 2021.12.16 VSCode ESLint, Prettier 자동 수정 적용안될 때 (0) 2021.12.08 Expo xcrun exited with non-zero code: 2에러 해결하기 (0) 2021.10.27