javascript만을 이용해서 컴포넌트를 만들고, 컴포넌트 간 상호작용하는 방법을 배웠다.
컴포넌트를 이용해 객체를 생성할 때 기능을 추가하고 싶다면 인자로 원하는 기능의 콜백 함수를 받아서 컴포넌트 내에서 실행하게 하면 된다.
// params.$target - 해당 컴포넌트가 추가 될 Dom 엘리먼트
// params.initialState - 해당 컴포넌트의 초기 상태 (초기 데이터들)
export default function TodoList({ $target, initialState }) {
const $todoList = document.createElement("div"); // 자기 자신
$target.appendChild($todoList); // 부모 요소에 연결
this.state = initialState;
this.render = () => {
$todoList.innerHTML = `
<ul>
${this.state.map(({ text }) => `<li>${text}</li>`).join("")}
<ul>
`;
};
// 변경된 상태로 다시 그려주는 함수
this.setState = (nextState) => {
this.state = nextState;
this.render();
};
this.render();
}
form컴포넌트의 input에서 받아진 text를 todoList컴포넌트로 넘겨 화면에 출력해야하는 상황일 시
form컴포넌트의 인자로 콜백 함수를 전달하는데, form컴포넌트는 자신의 안에 있는 값(text)을 넣어서 실행만 해줄 뿐, 어떤 일을 하는지는 외부에서 정해지게 된다.
콜백함수의 실행문 내용
new TodoForm({
$target,
onSubmit: (text) => {
const nextState = [...todoList.state, { text: text }];
todoList.setState(nextState);
},
});
const todoList = new TodoList({
$target,
initialState,
});
리액트를 조금 배웠었는데 리액트랑 거의 비슷하다.
하지만 그 당시에는 그냥 리액트에서는 이런걸 써야하는구나 정도로만 생각하고 코드를 작성했었다. 하지만 외워서 사용하려니 그 원리를 알지 못해서 응용을 하지 못했었다.
강사님이 자바스크립트 만으로 컴포넌트를 만들어 사용할 줄 알아야
프레임워크를 사용할 때 해메지 않을 거라고 말씀하셨는데 100퍼센트 공감이 갔다. 이번 수업을 통해서 컴포넌트 방식으로 코드를 짜는 원리를 하나 하나 다 알게되었기 때문에 전보다는 좀 더 수월하게 리액트를 사용할 수 있을 것 같다는 생각이 들었다~~