D.JOUNG

해당 에러는 주로 map 함수를 이용해 반복적인 컴포넌트를 생성했을 때 발생한다. 편집기에서 빨간줄 긋고 안내해주는 대로 반복되는 컴포넌트에 key 속성을 추가해주면 문제없이 작동한다. 하지만 key 속성을 제대로 추가해줬는데도 자꾸 경고문이 발생해서 잠깐 골치가 아팠다.  경고문 발생 이유는 단순했다. 컴포넌트를 안에 넣고 까지 포함하여 반복 생성했던 것...컴파일러가 까지 자식 컴포넌트로 인식해 key 프롭스가 없다는 경고문을 자꾸 뱉었던 것이었다.

componentDidUpdate와 componentWillUnmount는 클래스 컴포넌트에서 사용하는 생명주기 관리 메소드, useEffect는 함수 컴포넌트에서 사용하는 생명주기 관리 Effect hook이다. 공식 문서를 조금이라도 깔짝여본 적이 있다면 useEffect를 componentDidUpdate와 componentWillUnmount의 역할로 이해해도 괜찮다고 적시한 내용을 기억할지도 모른다. 하지만 위 두 함수와 useEffect가 완벽하게 동일한 역할을 한다면 모순되는 부분이 보이기 시작했다. 아무래도 자세한 이해가 부족한 것 같아 미뤄뒀던 공식 문서의 다음 장을 읽기 시작했다. 클래스 컴포넌트의 두 함수와 useEffect의 차이를 명확하게 이해하기 위해서는 먼저 두 컴포넌트의 생명..

제로초님의 React 무료 강의를 계속 시청하며 기초를 다져가는 중이다. 1부 수업인 로또 숫자 당첨기까지 수강했고, 중간 점검 겸 React의 Hooks들을 정리하고 넘어가려고 한다. React는 두 가지 형식으로 컴포넌트 제작 방식을 제공하고 있다. 클래스 컴포넌트와 함수 컴포넌트인데, 원래는 클래스 컴포넌트를 주로 사용하다가 최근 현업에서는 거의 함수 컴포넌트만 사용하고 있다고 한다. React 공식 문서에도 'Class 컴포넌트를 삭제할 예정은 없다'라는 문구가 굳이 실려있는 것을 보면, 개발자들이 Class 컴포넌트의 삭제를 고려할 만큼 함수 컴포넌트가 대세이긴 한 것 같다. 함수 컴포넌트를 사용하면 클래스 컴포넌트보다 라인 수를 줄일 수 있고, this 예약어나 class 형식을 신경쓰지 않는..