[FE 취업 생존 키트] 1주차 과제 리뷰

과제는 프레임워크를 사용하지 않고 순수 자바스크립트만 사용했다.
평소에 회사에서 React로 개발했던 나는 얼마나 프레임워크 안에서 편하게 개발하고 있었는지
알 수 있었다. 맨 바탕에서 만들어보려고 하니 머리 속에서 잘 떠오르지 않았다.
컴포넌트를 구성하고 그걸 DOM에 업데이트하는 과정이 어려웠다.

컴포넌트에서 상태 변화를 담당하는 변수는 state로 묶자

컴포넌트의 일관성을 위해 상태 변화 관련 변수는 state와 setState를 작성해서 활용한다.

• 기존 코드

constructor() {
	this.list = [];
}

• 개선 후 코드

constructor() {
	this.state = {
    		list: [],
    	}
}

컴포넌트의 렌더링은 예측하기 쉬운 곳에서 하자

컴포넌트의 렌더링이 다양한 메서드에서 이루어지게 되면 전체적인 그림이 잘 안보일 수 있으므로 예측하기 쉬운 곳에서 렌더링한다. 컴포넌트의 상태를 업데이트 시키는 setState 메서드를 작성해두고 그 안에서 렌더링시키면 더 예측하기 쉽다.

• 기존 코드

addItem (name) {
	this.list.push(name);
    this.render();
}

• 개선 후 코드

setState (state) {
	this.state = { ...this.state, ...state };
    	this.render();
}

input의 keyUp 이벤트 대신 Form으로 감싸서 Submit 이벤트를 사용하자

keyUp 이벤트는 한글을 사용할 때 이슈가 있고, Form안에서 Submit 이벤트를 사용할 때는 keyCode 같은 것을 구분할 필요가 없기 때문에 더 간결하다.

• 기존 코드

handleKeyUp = (e) => {
	const { keyCode, target: { value }} = e;
    	if (keyCode === 13) {
        	this.handleSubmit(value);
        }
}

• 개선 후 코드

handleSubmit = (e) => {
	e.priventDefault();
    	this.handleSubmit(e.target.value);
}

label 태그 안에 input을 넣어서 사용하자

label 안에 input이 있으면 for, id property를 할당할 필요 없이 label 안에 있는 input에 focus된다.