이렇게 길어지게 될지 몰랐다. 너무 감이 안잡혀서 다른 스터디원들(PR을 재빠르게 올리신 능력자)의 코드를 가져와서 클론코딩했다. 사실 코드 자체가 너무 이해가 안돼서 처음에는 간단하게 훑어 보려고만 했던 처음 계획과는 달리 A to Z 까지 직접 따라치면서 전체적인 흐름을 살폈다. 다행이다! 얼추 감이오는 것 같다. (먼저 허락도 없이 클론코딩& 참조를 한 같은 팀의 JSKIM님 그리고 수연님 께 감사하다는 말씀 꼭 드리고싶다.)
전에는 CRUD의 기능단위로 글을 작성했었지만, 이번에는 컴포넌트의 단위로 미션 수행과정을 작성해보려고 한다. (처음 미션이 주어졌을 때의 index.html 기준으로 위에서부터 아래 순서로 차례대로 구현해보겠다.
처음 React는 class 스타일을 사용하였고, 최근에는 function 스타일을 사용하는 것으로 알고 있다. 이전에는 function의 기능이 class에 비해서 너무 안좋아서, 사용할 수가 없었던 반면에, function의 기능이 개선되면서 class 만큼의 기능을 다 할 수는 없지만 중요한 기능들의 대부분은 사용할 수가 있어서 function 스타일을 쓴다는 얘기를 들었었다. (feat. 이고잉 님) function style의 가장 큰 단점은 state의 변화를 처리할 수 없다는 것이다. (state를 아예 가질 수 없던건가? 그건 자세히 기억이 나지 않는다) 외부에서 값을 받아와서 state를 변경할 수 있는 최소한의 class가 한 개가 필요하다고 판단되어 Todo-List 앱에 필요한 컴포넌트들을 담은 App.js는 클래스로 정의한다.
function TodoHeader() {
this.init = () => {
let $target = document.querySelector("#todo-app-header");
$target.innerHTML = `<h1>Roki's TODOS</h1>`;
}
this.init();
}
export default TodoHeader;
다소 밋밋해 보일 수 있지만, 위와 같이 작성해 보았다. App 클래스에서 호출하는 코드는 생략한다.