전체 글

재조정 (Reconciliation)

리액트 공식문서의 재조정(Reconciliation)을 읽고 정리해 봤다. 개요 리액트는 UI를 갱신할 때 (컴포넌트를 다시 그릴 때) 2가지 조건에 기반하여 두 개의 리액트 엘리먼트 트리를 비교하고 트리를 갱신한다. 1) 엘리먼트의 타입이 다르면 서로 다른 트리이다. 2) key가 같으면 같은 엘리먼트다 (변경하지 않는다). 이 2가지 조건에 기반하여 트리를 비교하면, 기존 O(n^3) 에서 O(n)으로 시간 복잡도를 줄일 수 있다. 비교 알고리즘 2개 트리를 비교할 때 root 엘리먼트부터 비교한다. 엘리먼트의 타입이 다른 경우 이전 트리를 버리고 완전 새로운 트리를 구축한다. 이전 트리와 연관된 모든 state는 사라진다. 자식 컴포넌트들의 state도 사라진다. ex) ...child도 똑같이 5..

Vanila Js로 SPA 만들기

링크: https://programmers.co.kr/skill_check_assignments/199 개요 Vanila JS를 사용해서 쇼핑몰 사이트를 구현했다. 상품 목록페이지에서 상품 목록을 조회할 수 있고, 상품을 클릭 시 해당 상품의 상세 페이지로 이동한다. 상품 상세페이지에서 상품의 상세 정보를 조회할 수 있고, 상품의 옵션을 선택한 후 주문하기를 클릭하여 장바구니에 담을 수 있다. 장바구니 페이지에서 장바구니 에 담은 상품들을 조회할 수 있고, 주문하기 버튼을 클릭하여 해당 상품들을 주문할 수 있다. 라우팅 기본 - 주소에 따라 다른 화면 보이기 먼저, 주소에 따른 앱 내부를 해당 페이지로 변경하는 render 함수를 만들었다. 그 다음에 location의 pathname을 활용해서 주소가 ..