[DAY 28] WIL

1nxeo·2023년 3월 5일

항해99

목록 보기
25/63
post-thumbnail
[KEYWORD]
Virtual DOM, props, state
  1. Virtual DOM
    가상돔

    리액트는 가상DOM을 이용하여 실제DOM을 변경하는 작업을 상당히 효율적으로 수행한다.
    가상DOM은 실제DOM과 구조가 완벽히 동일한 복사본 형태
    실제 DOM은 아니지만, 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행할 수 있음.

<클릭 한 번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면>

  • 실제 DOM : 5번의 화면 갱신 필요
  • 가상 DOM : Batch Update로 인해 단 한번만 갱신 필요
  1. props
    리덕스 공부해보니까.. props가 꽤 중요하더라.....
    사실 저번주까지는 두루뭉술 오 그래 자식! 엄마 ! 할아버지 ! 상속 ! 이러고 넘어갔는데,,,,
    약간 리덕스 연습 하면서 그래도 적재적소에 useState쓰고,, 그리고 예를들어 카드컴포넌트에 props로 어떤 정보를 넘겨줘야 하고,, 이런 부분에서 이친구를 정확하게 이해하고 가야겠다는 생각이 들었다.
    그래도 여전히 어려운 건 props children 인데 .. 음.... 봐도봐도 모르겠음.. 일단은 더 공부해보기로 한다...

  2. state
    앞서 언급했듯이.. 리덕스를 이용하여 프롭스로 정보를 넘겨주지 않아도 된다고 해서 state를 사용하지 않아도 된다는건 아니라는 것을 깨달음... 페이지가 넘어갔을 때 (언마운트?) state로 저장된 정보들은 초기화가 돼야하는데 .. initialState부분에 처음부터 isEdit이라는 값을 설정해둔 뒤, 수정부분을 열어놓고 디테일 페이지로 넘어갔다가 다시 홈으로 돌아오면 수정창이 그대로 열려있어서 그거 고치는거 생각하는데 시간좀 보냈다.. 그러니까 이럴 때 state를 사용해야 하는겨...

profile
항상 피곤한 인서의 개발블로그

0개의 댓글