[TIL] Day-13

javascript만을 이용해서 컴포넌트를 만들고, 컴포넌트 간 상호작용하는 방법을 배웠다.

컴포넌트 방식으로 생각하기

• ui를 연관된 것끼리 단위로 묶기
• 컴포넌트는 독립적이어야 함 → 필요한 기능들이 독립적이면서 집약적이어야 함

컴포넌트 만들기

0. 자식으로 연결될 부모 엘리먼트와 초기 데이터를 인자로 받아온다.
1. 자신의 엘리먼트를 만들고 부모 엘리먼트에 연결한다.
2. 상태 변수에 초기 데이터를 넣는다.
3. 렌더 함수를 만들어 dom과 dom이벤트에 관련한 코드를 작성한다.
   → 현재의 상태를 이용해 돔 객체를 만들어 화면에 그려주는 역할이다.
4. 상태가 바뀌면 바뀐 상태를 적용해 다시 렌더링해주는 함수를 선언한다.
5. render함수를 실행한다.

컴포넌트를 이용해 객체를 생성할 때 기능을 추가하고 싶다면 인자로 원하는 기능의 콜백 함수를 받아서 컴포넌트 내에서 실행하게 하면 된다.

// 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)을 넣어서 실행만 해줄 뿐, 어떤 일을 하는지는 외부에서 정해지게 된다.

콜백함수의 실행문 내용

• 현재의 todoList의 상태에 새로 생성된 text값을 추가해 새로운 객체를 만든다.
• 그 객체를 nextState에 넣어주고,
• todoList의 setState를 이용해 todoList의 상태를 nextState로 바꿔준 후,
  렌더링하게 한다.

new TodoForm({
    $target,
    onSubmit: (text) => {
      const nextState = [...todoList.state, { text: text }];
      todoList.setState(nextState);
    },
  });

  const todoList = new TodoList({
    $target,
    initialState,
  });

리액트를 조금 배웠었는데 리액트랑 거의 비슷하다.
하지만 그 당시에는 그냥 리액트에서는 이런걸 써야하는구나 정도로만 생각하고 코드를 작성했었다. 하지만 외워서 사용하려니 그 원리를 알지 못해서 응용을 하지 못했었다.

강사님이 자바스크립트 만으로 컴포넌트를 만들어 사용할 줄 알아야
프레임워크를 사용할 때 해메지 않을 거라고 말씀하셨는데 100퍼센트 공감이 갔다. 이번 수업을 통해서 컴포넌트 방식으로 코드를 짜는 원리를 하나 하나 다 알게되었기 때문에 전보다는 좀 더 수월하게 리액트를 사용할 수 있을 것 같다는 생각이 들었다~~