몇 주에 걸쳐 진행된 위스타그램 프로젝트 마무리 중이다.
지금까지 기능 구현과 레이아웃에만 포커스를 두었다면, 마무리 단계에서 동료분들과 멘토님께 받은 리뷰를 반영하여 리팩토링을 해봐야겠다.
🛠 위스타그램 리팩토링
1️⃣ 모호한 네이밍 지양하기
const onChange = e => {
const { value, name } = e.target;
setInputs({
...inputs,
[name]: value,
});
};변수명 혹은 함수명은 실제 하는 동작과 동일하게 작성해야 하며,
특히 위의 함수명 같은 경우에는 함수의 목적이 드러나야 하기 때문에, onChange 보다는 직관적인 onChangeLoginInput이 적합하다.
2️⃣ 불필요한 태그
return (
<div> //이 부분은 생략 가능
<div className="login">
<div className="wrapper">
<h1>Westagram</h1>
<form>
<div className="inputWrap">
<input
type="text"
name="inputId"
className="inputId"
maxLength="75"
placeholder="전화번호, 사용자 이름 또는 이메일"
onChange={onChangeLoginInput}
/>
<input
type="password"
name="inputPwd"
className="inputPwd"
placeholder="비밀번호"
onChange={onChangeLoginInput}
/>
</div>
<button
className={`loginButton ${
isLoginInputValid ? 'activated' : 'deactivated'
}`}
type="button"
// id="loginBtn"
onClick={loginBtnClick}
>
로그인
</button>
<div>
{inputId}
{inputPwd}
</div>
</form>
<div className="findWrapper">
<Link to="">비밀번호를 잊으셨나요?</Link>
</div>
</div>
</div>
</div> //이 부분은 생략 가능
);위와 같이 요소가 하나일 때에도 상위에 부모에 <div>를 추가했다.
컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸야 하지만, 위 같은 경우에는 굳이 부모 요소를 생성해 추가할 필요가 없다.
3️⃣ 불필요한 속성
block요소에는 굳이 width: 100%를 줄 필요가 없지만, 혹시나 하는 마음으로 줬다..
그렇다면 width: 100%; 주어야 하는 경우는 ?
부모에서 flex display 일 경우가 있다.
자식들은 inline-block이니까 width 값을 주어야 한다.
4️⃣ 태그 셀렉터 지양하기
한 페이지에 인풋이 로그인을 위한 인풋 두개 뿐이더라도 태그 셀렉터는 최대한 지양하자.
5️⃣ id 사용 🙅
> 수정 전 코드
<button
className={
isLoginInputValid ? 'activated' : 'deactivated'
}
type="button"
id="loginButton'
onClick={loginBtnClick}
>
/////////////////////////////////////////////
> 수정한 코드
<button
className={`loginButton ${
isLoginInputValid ? 'activated' : 'deactivated'
}`}
type="button"
onClick={loginBtnClick}
>로그인 버튼 색상을 따로 줄 className과는 별개로 다른 속성을 주고 싶었기 때문에 id 선택자를 추가했다. 하지만 아래 수정한 코드와 같이 템플릿 리터럴로 중복의 클래스네임을 넣어줄 수 있었다. 다양한 속성을 추가적으로 작성하고 싶을 때 유용하게 쓰이기 때문에 꼭 기억하자!
6️⃣ useRef 왜 사용하는지 이유 생각해보기
useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다.
일반적인 유스케이스는 자식에게 명령적으로 접근하는 경우이다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다. 아래 코드는 useRef를 사용하여 작성한 코드이다.
const nextId = useRef(4);
const addComment = e => {
e.preventDefault();
if (input.length !== 0) {
const newComment = {
id: nextId,
userName: 'joo',
content: input,
isLiked: false,
};
setComments([...comments, newComment]);
nextId.current += 1;
setInput('');
} else {
alert('내용을 입력해주세요!');
}
};🌝 마무리하며...
리팩토링을 통해 어떤 부분을 유념하며 코드를 작성해야 하는지 생각해볼 수 있었다. 괜찮겠지- 생각했던 것들도 꼼꼼하게 짚고 넘어가니까 코드가 더 깔끔해졌다. 리팩토링 하기 전에는 기능 구현 유무에만 집중했다면, 앞으로는 좀 더 깔끔하고 효율적인, 가독성 좋은 코드를 작성하기 위해 한 번 더 생각해볼 것 같다. 틀렸다고 부끄러워 말고 적어도 이번에 했던 실수만이라도 반복하지 말자!
