📝6주차 위클리 페이퍼 미션

📌 6주차는 React에 props와 useState , useEffect에 대해 
학습을 하면서 과제를 진행했다.정말 시간가는줄 모르고 한 주를보냈다.
api data를 이용하여 프로젝트 과제를 코딩했었는데 , 검색하랴 복습하랴 코딩하랴..정말 
JS,React 정말 너무나도 잘하고싶다.
복습 꾸준히 하고 학습진도 열심히 따라가보자! 
이번 주제는 React에 관한 2가지 주제를 받았다.

🎯리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

• DOM이란 ?
  DOM은 Document Object Model 의 약자이며,
  문서 객체 모델이라고 불린다.
  HTML 문서전체를 객체로 표현한것이라고 볼 수 있다. 이때
  각 객체를 노드(Node)라는 용어로 표현한다.
  태그는 요소 노드, 문자는 텍스트 노드로 구분한다.
• Virtual DOM이란?
  Virtual DOM이란 가상 DOM이라고도 한다.
  Virtual은 가상 이라는 뜻을 지니고 있다.
  가상 DOM은 메모리에 DOM(문서 개체 모델)의 가상 표현을 생성하는 것과 관련된 웹 개발에 사용되는 개념 및 기술이다.
  하지만 Javascript는 나날히 발전을 하고있는데 그럼에도 불구하고
  왜 Virtual DOM을 사용하는것일까?
  결론부터 말하자면 성능 최적화 때문이다.
  Virtual DOM을 사용하면 사용자 인터페이스를 업데이트하는데 보다 효율 적이고 성능이 뛰어나기 때문에 Virtual DOM을 사용하는 이유다.
  UI를 변경해도 전체 DOM이 즉시 업데이트되지는 않는다. 대신, 먼저 가상 DOM이라고 알려진 메모리 내 DOM의 가상 표현에 변경 사항이 적용된다.
  가상 DOM은 실제 DOM의 경량 복사본이며, 업데이트가 페이지에서 직접 발생하지 않고 메모리에서 발생하기 때문에 더 빠르다.외에도 많은 장점들이 있기에
  Virtual DOM을 많이 선호하고있는 추세다.
  

🎯리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

• 컴포넌트를 반복하여 렌더링해야 하는 경우, map을 사용한다.

  만약 배열 내부의 엘리먼트에 key 값을 지정해주지 않으면,

'Each child in a list should have a unique key prop.' 

위와 같은 경고문이 뜨게 된다.

리액트 공식문서에서는 key는 어떤 아이템이 변화되거나 추가 또는 삭제되었는지를 식별하기 위해 필요하다고 한다.

리액트는 state에서 변경된 부분만 찾아 리렌더링해준다.
이때 가상 DOM과 비교하여 해당 부분만 리렌더링해준다. 여기서 문제는
배열에 요소가 추가되었다면 배열 전체가 변경된 것이라고 인식하고 전체를 리렌더링 한다.

이러한 문제를 보완하고자 배열 내부 엘리먼트에 key값을 지정해줘야한다. key 값을 지정해주면 리액트는 배열에 추가된 요소에 대해서만 리렌더링한다. 즉, key는 배열의 어떤 원소에 변동이 있었는지 식별하고자 할 때 사용되는 것이다. 따라서, 데이터가 가진 고유의 값을 key로 설정해야 한다.

👍🏻Refernce
Code-it
React Key