이번 시간에는 컴포넌트에 대해 더 알아보겠습니다
우선 이번 강의에서도
이전과 동일한 프로젝트와 앱 컴포넌트를 사용하겠습니다
이 JSX 코드를 보시면 알 수 있는 것은
이 루트(root) 컴포넌트 속에 많은 것이 포함되어 있습니다
결국에는 다양한 책임이 발생하게 되는 이유는
여기 이 앱 컴포넌트의 역할이
이 쪽의 Core Concepts (핵심 개념) 섹션 및 아이템 모두를
렌더링하는 것이기 때문입니다
이 컴포넌트는 이쪽의 탭 버튼 관리와 더불어
화면 하단의 상호작용 가능한 부분 또한 담당하고 있는데요
이 모든 것들은 결국
이 앱 컴포넌트가 관리하고 있습니다
이 앱 컴포넌트는 이 쪽 상태(state)를 사용하여
상호작용 가능한 부분을 관리하고
데이터 파일(data.js)에서 핵심 개념 데이터를
가져오게 됩니다
물론 이 기본적인 앱에 있어서는
큰 문제가 되지 않겠지만
단 하나의 컴포넌트를 가지고
이렇게 다양한 요소를 관리하고 있다면
더 잘게 나눠 주는 것이 좋은데
더 작은 단위의 하위 컴포넌트 여러 개로 나누는 것이 좋습니다
저희가 이 앱에서도 확인할 수 있는
신호가 하나 있는데요, 이미 보셨을 수도 있습니다
이 탭 버튼을 계속 누르다 보면 위쪽의 이 텍스트가
내용이 바뀌곤 합니다
여기를 누르면 위쪽 텍스트가 'fundamental'로 시작하고
여기서는 'cruial'로 시작하는 게 보이실 겁니다
이러한 현상은 저희가 이 상태(state)를 제어하고 있기 때문입니다
이 앱(App) 컴포넌트의 selectedTopic이라는 상태인데요
이전 강의에서 다루었듯이
이 상태가 아래의 이 부분으로 인해 업데이트될 때마다
이 상태를 업데이트하는 함수, 즉 상태를 포함하는
이 컴포넌트 함수가 매번 재실행됩니다
이것으로 리액트가 해당 JSX 코드에 어떤 변화가 생겼는지 확인하고
화면상으로 보이는 내용을 업데이트하게 됩니다
그런데 여기의 헤더(header) 컴포넌트가 사용되는 곳이
이 앱 컴포넌트인데요, 이 때문에 헤더 컴포넌트 함수도
마찬가지로 재실행됩니다
이 부분의 모든 코드는
앱 컴포넌트에 속해 있고, 재실행되는 시점은
앱 컴포넌트 함수가 재실행될때입니다
그러므로 당연히 헤더 컴포넌트 함수 또한
재실행됩니다
그러므로 여기서 새로운 무작위의 숫자를 생성하는 것은
이 부분이 새로 실행될 때마다 일어납니다
그리고 이 텍스트 또한 업데이트가 됩니다
이 부분이 또 알려주는 것은
상태 관리를 하는 데 있어
이 SelectedTopic 상태 관리가
잘못된 컴포넌트 안에서 이루어지고 있을 가능성이 있다는 것입니다
이 앱 컴포넌트를 잘게 쪼개는 것이 적절한 대안이므로
다음 시간에는 그 내용을 다루도록 하겠습니다
추가 컴포넌트가 들어갈 만한 위치를
잘 파악하는 것에 더해, 이처럼 큰 컴포넌트를
더 작은 컴포넌트로 잘게 쪼개게 되면
책임을 분할할 수 있으므로
이 내용은 리액트 개발자에게 아주 중요합니다