2021-05-25 코드리뷰
코드 가독성
기존 코드
<RadioGroup
id="creater"
aria-label="generator"
name="generator"
row
onChange={(e) => {
const value = e.target.value === 'teacher' ? 'teacher' : 'org';
const form = { ...props.formData, creater: value };
setOrgDescDisabled(props.formData.creater === 'org');
props.handler(form);
console.log(form);
}}
value={props.formData.creater}
>
<TextField
id="title"
className={classes.textField}
variant="outlined"
label="클래스 제목을 입력해주세요."
onChange={(e) => {
const value = e.target.value;
const form = { ...props.formData, title: value };
props.handler(form);
}}
value={props.formData.title}
/>
<RadioGroup
id="creater"
aria-label="generator"
name="generator"
row
onChange={(e) => {
const value = e.target.value === 'teacher' ? 'teacher' : 'org';
const form = { ...props.formData, creater: value };
setOrgDescDisabled(props.formData.creater === 'org');
props.handler(form);
console.log(form);
}}
value={props.formData.creater}
>
<TextField
id="title"
className={classes.textField}
variant="outlined"
label="클래스 제목을 입력해주세요."
onChange={(e) => {
const value = e.target.value;
const form = { ...props.formData, title: value };
props.handler(form);
}}
value={props.formData.title}
/>
onChange=>{}
내부에 이벤트를 각각 구현하고 있었다. 코드 길이도 길어지고, 가독성도 좋지 않은 상태였음.
코드 리뷰 후 코드
function handleChangeForm(propertyName: keyof FormData, value: unknown) {
props.handler({ ...props.formData, [propertyName]: value });
}
<TextField
id="title"
className={classes.textField}
variant="outlined"
label="클래스 제목을 입력해주세요."
onChange={(e) => handleChangeForm('title', e.target.value)}
value={props.formData.title}
/>
handleChangeForm(...)
이라는 핸들러를 만들고, onChange={}
이벤트 내부에 핸들러 함수 하나만을 이용해서 이벤트를 컨트롤 하게 만든다. 단 한 줄로 코드가 정리되었으며 다른 이벤트에도 동일하게 적용할 수 있다.
children & onClick event
interface CreateProjectCardProps {
onclick?: () => void;
children: React.ReactNode;
}
function CreateProjectCard(props: CreateProjectCardProps) {
return (
<Paper>
<Typography>프로젝트</Typography>
<img src="statics/imgs/poision.png" />
</Paper>
);
}
<CreateProjectCard
onclick={() => {
history.push('/class/project/create/select');
}}
>
<CardContent>
<Typography variant="h5">프로젝트 생성</Typography>
</CardContent>
</CreateProjectCard>
children
interface CreateProjectCardProps {
onclick?: () => void;
children: React.ReactNode;
}
function CreateProjectCard(props: CreateProjectCardProps) {
return (
<Paper>
<Typography>프로젝트</Typography>
<img src="statics/imgs/poision.png" />
</Paper>
);
}
<CreateProjectCard
onclick={() => {
history.push('/class/project/create/select');
}}
>
<CardContent>
<Typography variant="h5">프로젝트 생성</Typography>
</CardContent>
</CreateProjectCard>
children
을 선언하지 않고 리액트 컴포넌트 내부에 children
를 선언할수 있는 방법은 없다. 심지어 위의 CreateProjectCard
는 children
을 렌더링 하고 있지도 않았음. children
을 인터페이스 파라메터로 넣지 않고 사용하려면, styled-components
를 이용해서 컴포넌트를 만들고 const CardWrapper = styled(Paper)
처럼 컴포넌트를 만들어 사용해야 한다.
onClick
CreateProjectCard
에는 onclick
이라는 프로퍼티가 있다. 나는 당연히 onClick
이벤트에 onclick
구현을 넣어주면 이벤트가 발생할거라 생각하고 있었다. 하지만 안됨ㅋ
일단 위 구현에서의 문제는 <Paper>
에서 onclick={function}
을 전달하고 있지도 않고있다. CreateProjectCard
에서 onclick
파라메터에 그냥 익명함수를 넣어주고 있다.
refactoring
function CreateProjectCard(props: CreateProjectCardProps) {
return (
<Paper onClick={() => props.onclick}>
<Typography>비즈니스모델 캔버스</Typography>
<img src="statics/imgs/poision.png" />
{props.children}
</Paper>
);
}
<CreateProjectCard
onclick={() => {
history.push('/class/project/create/select');
}}
>
<CardContent>
<Typography variant="h5">+ 프로젝트 생성</Typography>
</CardContent>
</CreateProjectCard>
children
은 {props.children}
으로 렌더링 해주고 있고(styled-components를 쓸 수도 있다), <Paper>
에는 onClick={() => props.onclick}
와 같이 <Paper>
의 onClick
에 onclick
함수 구현을 넣어주도록 해주었다.
Author And Source
이 문제에 관하여(2021-05-25 코드리뷰), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nomore12/2021-05-25-코드리뷰저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)