진행 일정 : 2/14, 2/21, 2/28 11:00 am
[0] before entering
왜 리액트를 사용하는가? (왜 리액트를 선택했나)
- 리액트의 선언형, 컴포넌트화라는 특징에 집중해서 설명
어떻게 사용하는 것이 좋을까요?
- 하기 best practice에서 살펴보자.
[1] performance optimizations
1. Keep components small and function-specific
- 변경이 일어나는 특정 부분만 리랜더링되기 때문에 리랜더링 되는 부분이 적다. > 성능 최적화
- 재사용성이 높다. > 유지보수 용이
- 기능별 독립적으로 컴포넌트를 구성 > 테스트 용이
2. Consolidate duplicate code - DRY(Don't Repeat Yourself)
- 중복 코드 사용을 피해, 가독성 및 성능 최적화
const buttons = ['facebook', 'twitter', 'youtube'];
return (
<div>
{
buttons.map( (button) => {
return (
<IconButton
onClick={doStuff( button )}
iconClass={button}
/>
);
} )
}
</div>
);3. Separate stateful aspects from rendering
- 필요할 때만 상테를 선언 > 불필요한 리랜더링 발생을 방지
- 예를 들어 API에서 사용자 데이터를 가져오는 경우 개별 속성을 저장하는 대신 전체 사용자 개체를 상태로 저장
as-is
const [showToast, setToast] = useState<boolean>(false);
const [toastMessage, setMessage] = useState<string>('');
to-be
const [toast, setToast] = useState({
open: false,
message: '',
onClose: () => setToast((prev) => ({ ...prev, open: false, message: '' })),
});
4. Organize Files Related to the Same Component in One Folde
- 특정 컴포넌트의 모든 파일이 포함된 단일 폴더를 사용 > 재사용, 공유 및 디버그가 용이
- 컴포넌트의 작동 방식을 확인하려면 단일 폴더만 열면 된다.
-
폴더 및 파일명은 일관되고 예측이 가능해야 합니다. 폴더 구조 패턴에 따라서 유사한 컴포넌트를 배치해야 합니다. 기본적으로 새 컴포넌트를 생성할 때마다 잘 정의된 패턴을 기반으로 컴포넌트를 생성할 위치를 알아야 합니다.
-
관련 파일(컴포넌트, 테스트 코드, 스타일, 타입)은 모두 하나의 폴더에 보관해야 합니다.
예를 들어 Story.tsx(스토리북을 사용하는 경우)와 같은 다른 파일을 추가하려는 경우에는 동일한 폴더에 추가 -
Button, Form, List와 같이 기본적인 UI에서 사용되는 컴포넌트 들은 별도의 폴더에 보관해야 합니다. (core)
분리된 작업을 쉽게 할 수 있고 일부 개발자는 이 폴더에만 집중을할 수 있습니다. 재사용, 공유 및 디버그가 용이합니다.
5. Object literal
- 가독성 좋음
as-is
const Template =
media === MEDIA_NAME.SKT
? PageTemplate
: media === MEDIA_NAME.KT
? PageTemplateKt
: media === MEDIA_NAME.LGU
? PageTemplateLgu
: PageTemplate;to-be
const {media} = useParam();
const components = {
skt: PageTemplate,
kt: PageTemplateKt,
lgu: PageTemplateLgu
};
const Template = components[media];
return <Template />;