이제 어떤 탭 버튼을
눌렀는지에 따라 여기에
다른 콘텐츠를 출력하도록 하겠습니다
그리고 이를 위해 변수를 사용해 볼 수 있습니다
여기 이 앱 컴포넌트 함수에 변수를 추가할 수 있으며
tabContent라고 이름을 붙입니다
그리고 처음에는 'Please click a button' (버튼을 클릭해주세요)라고 말할 수 있지만
handleSelect가 실행되면
tabContent 변수를 업데이트하고
selectedButton과 동일하게 설정한다고 가정해 보겠습니다
이 식별자는
제가 원하는 최종 결과는 아니지만
좋은 첫 단계가 될 것입니다
이제 tabContent 변수를 이전에 배운 대로
사용할 수 있고 중괄호를 사용해
아래에 동적으로 출력할 수 있습니다
이제 tabContent을 출력하고
저장하면
'Please click a button' (버튼을 클릭해주세요) 라는 시작 문구가 보입니다
제가 여기를 클릭하고 있는데
이 버튼들을 눌러도
텍스트가 바뀌지
않는 것이 보입니다
똑같습니다
코드가 작동 안하는 것 같습니다
버튼을 클릭한다는 것을 확인하기 위해
handleSelect 설정 후 그 안에서
tabContent를 console.log하겠습니다
그러고 새로고치면
오른쪽에 로그 문장이 나옵니다
그러나 텍스트가 업데이트 되지 않습니다
이를 보니 함수가 실행이 되고
변수를 업데이트하고 있으나 UI가 업데이트 되지 않는 것입니다
앱 컴포넌트 함수가 실행되지 않아
UI가 업데이트 되지 않는 것입니다
handleSelect 함수가 실행되었어도 말입니다
앱 함수가
또 실행되지 않기 때문에
모든 JSX 코드가 재평가 되지 않는 것입니다
리액트는 JSX 코드를 보고 현재 렌더링된
UI와 비교하기 때문에
UI를 업데이트하려면
이 코드가 리액트에 의해 재평가되어야 하기 때문에
여전히 초기 tabContent 값만 알고 있습니다
그리고 변화를 탐지한다면
그에 맞춰 UI를 업데이트 할 것입니다
지금 이 코드는 한번만 실행되기 때문에
새로운 내용이 감지되지 않아
UI가 업데이트되지 않습니다
기본적으로 리액트는
컴포넌트 함수를 코드 내에서 처음 발견했을 때
한 번밖에 실행하지 않는다는 걸
반드시 염두하고 있어야 합니다
예를 들어 App 컴포넌트 함수는
index.jsx 파일에서 처음 발견됩니다
리액트가 해당 함수를 실행하고 렌더링하는
시점이 바로 여기에 있습니다
다른 예시로TabButton Component는
App 컴포넌트가 실행하고 렌더링될 때
처음 발견됩니다
그러므로 그때 TabButton 컴포넌트 함수가
실행되고 렌더링됩니다
그러나 그 후에는
두 함수 모두 실행되지 않습니다
그리고 App 컴포넌트 함수 안에
console.log 문장을 추가하면
이런 내용을 알고 이해하게 될 것입니다
그러니 handleSelect 안이 아닌
App 컴포넌트 함수 안입니다
그리고 App 컴포넌트 렌더링을 로그로 출력하는 등
원하는 것을 실행하면 됩니다
그러니 여기서 로그를 출력하고
이것을 TabButton에서 로그 출력할 수도 있습니다
여기에 'TABBUTTON COMPONENT EXECUTING '이라고 입력하고
저장하고
새로고침하면
APP COMPONENT EXECUTING이 한번 출력되고
TABBUTTON COMPONENT EXECUTING은
4개 버튼이 있기 때문에 4번 출력됩니다
그러므로 TabButton Component가
UI에서 4번 볼 수 있습니다
이제 리액트는 각각의 컴포넌트 함수를
JSX 코드에서 볼 때마다 실행할 것입니다
그러나 이 버튼 중 하나를 누르면
이 로그 메시지들이 또 출력되지 않는 것을 볼 수 있습니다
eventHandler 함수 안에 있는
다른 로그 메시지 밖에 없습니다
컴포넌트 함수가 또 실행되지 않는 것인데
그렇기 때문에 이와 같은 일반적인 변수로는
UI를 업데이트 할 수 없는 것입니다
그러므로 컴포넌트 함수가 재실행되어야 한다는 것을
리액트에게 알려줄 방법을 찾아야 합니다
이 때문에 매우 중요한 개념인
state(상태)가 필요한 것입니다
다음 수업에는 state(상태)에 대해 배우도록 하겠습니다