VanillaJS를 사용해서 코드를 짜보면서, 항상 Reactjs로만 익숙해져있던 내 머릿속은 혼란이 그득그득했다.
VanillaJS는 너무 자유로웠다. 할 수 있는 방법이 많았고, 그래서 정해진 틀도 없다. 그게 장점이자 단점인 것 같당. 너무 자유로운 것.
vanillaJS로 코딩을 하며 이것저것 서칭을 해보면서, vanillaJS로 React 컴포넌트처럼 코드를 짜보는 것을 시도해본다! 많은 공부가 될 것 같다.
결과야 어찌됐든 나에겐 공부가 많이 될 것 같은 이 기회를 만들어준….회사에게 감사하다!
컴포넌트 기반
컴포넌트 기반이라는 뜻은 컴포넌트마다 컴포넌트를 렌더링할 때 필요한 state를 각각 관리할 수 있는 것을 의미한다.
state라는 것은, 컴포넌트에서 관리되는 데이터이며, 데이터가 업데이트될 때마다 해당 컴포넌트는 리렌더링된다.
component -> render(didmount) -> setState(state 업데이트) -> rerender -> state 업데이트
그러므로 vanillaJS에서 위 단계를 실행시키려는 코드를 짜려면,
- component에 해당하는 html 태그값 가져와서
- render 함수를 만들어서
- component가 갖고 있는 데이터를 담은 객체(state)를 만들어서
- render 함수 내에서 해당 state를 html로 보여주도록하고!
- render 함수 내에서 state를 업데이트할 수 있는 기능을 달아주고
- setState 함수로 state를 업데이트해주는 로직을 추가, 그 후 render() 함수 실행
- render 함수 내에서 state 업데이트하는 setState 로직 반영
const app = document.querySelect('#app');
let state = {
items: [1, 2, 3],
};
const render = () => {
const { items } = state;
app.innerHTML = `
<ul>
${items.map((item) => `<li>${item}</li>`).join('')}
</ul>
<button id="append">추가</button>
`;
document.querySelector('#append').addEventListener('click', () => {
setState({ items: [...items, items.length + 1] });
});
};
const setState = (newState) => {
state = { ...state, ...newState };
render();
};
render();
이해하기 쉬운 코드를 참고할 수 있도록 해주신 개발자 황준일님께 감사드립니다!
위 자바스크립트로 컴포넌트가 상태를 가지고, 상태를 업데이트할 수 있는 로직이 완성!
- state 변경시 render 실행
- state는 setState로만 변경
위의 규칙이 잘 지켜진 좋은 코드 같다.
내가 참고한 사이트는 훨신 더 길고 더 많은 효율성을 생각해서 단계별로 정리해놓았는데, 일단 내 목표는 자바스크립트로 컴포넌트를 만들어보는 것이어서, 여기까지 정리를 줄이려한다!
글 너무 좋쟈나…. 진짜 너무 좋은 글, 좋은 코드 남겨주셔서 덕분에 편하게 공부합니다. 감사합니다아아 ㅠㅡㅠ
이후 글을 보고 정리할 게 있다면 추가적으로 포스트 작성하도록 하겠습니다!