TIL : 리액트에서는 직접 요소에 접근하면 안된다!

오늘한 것

1. 장바구니 추가, 숫자뱃지 완료
2. 프로젝트 폴더구조 변경
3. 메뉴에 따른 상품 필터링 완료
4. 포트폴리오 작성 시작
 
 
 

오늘 배운 것

1. 카테고리별 데이터 보여주기
필터를 써서 보여줘야 하나, 아님 DB를 거쳐서 가져와야되나 고민이 되었다. (너무나 당연한 답인데 뻘짓을 한건가?)
고민하다 내린 결론은 이것. 어차피 보여지는 데이터는 동일, 필터 기능이라고 생각하면 될 듯 싶다.
조회하는 조건이 다른 것도 아니고 DB에서는 한번만 요청하고, 그 안에서 데이터를 분류하면 되는거니까 데이터를 가져오면 filter로 다시 걸렀다.그리고 손쉽게 해결!
 
2. 클래스 요소에 속성 추가 
현재 프로젝트는 tailwind 사용 중,.. 클릭 시 특정 클래스에 스타일을 주고 싶은데 어떻게 줘야할까?
이건 tailwind의 문제가 아닌 react 자체에서 고민해야 하는 문제였다.
 
React는 가상 DOM을 생성한 후 이를 실제 DOM과 비교하고 달라진 부분만을 실제 DOM에 반영하는 방식으로 렌더링이 이루어진다. 이런 방식을 통해 렌더링 과정을 최소화한다. 그런데 만약 스크립트 코드를 통해 직접 DOM에 접근해버린다면 불필요한 렌더링이 발생할 뿐만 아니라, 웹 애플리케이션의 DOM 내부와 React 내부의 상태가 혼합되어 버리기 때문에 유지보수가 까다로워지는 문제점이 발생한다. 따라서 React에서 직접적인 DOM을 조작은 최대한 안하는 것이 좋다.
 
오호! 그래서 useState를 통해 상태관리를 하는거군! 
useState는 상태관리,,, 상태관리,,, 이렇게만 알고 있다가 이 글을 읽으니 더욱 확 와닿았다.
 
 
 

내일 할 것

1. 전체적으로 UI 변경(반응형 추가)
2. 장바구니 추가, 삭제 구현
3. 포트폴리오 작업(조금씩 천천히)