이제 상태 기능을 사용하여
버튼 식별자보다
의미 있는 내용을 출력하는 것을 배워봅시다
Export되는 예시 상수를 포함한
업데이트 된 data.js 파일을
첨부해놨습니다
이 상수는 버튼을 클릭하면
통과되는 식별자와 상응하는 키를
보유하는 객체입니다
즉, state, props, JSX와 컴포넌트를 보유하고 있습니다
이 식별자는
중첩 자바스크립트 객체가 있는데
각자 title, description과 code 속성이 있으며
여기에 출력되는 실제 데이터를 의미합니다
스타일과 연관하여
먼저 div와
tab-content id를 추가합니다
div안에 h3 요소를 넣고
이를 통해 title이 출력됩니다
그 밑에는 p태그를 넣어
description을 출력합니다
또 그 밑에는 중첩 코드 요소가 있는
pre 태그를 넣어 code 속성에 저장된
EXAMPLES의 코드를 출력합니다
이를 위해서 이 EXAMPLES를 import해야 하는데
상태를 관리하는 위치인 app.jsx 파일에
이 EXAMPLES 상수를 import합니다
./data.js에서 import해서
상수인 EXAMPLES를 불러들입니다
이제 이 EXAMPLES 상수를 자세히 봐서
클릭된 버튼에 대한 데이터를 사용합니다
즉, components, JSX, props, button 등입니다
이것은 비교적 간단합니다
이 상태에 식별자를 저장하기 때문에
이 상태를 사용해 다른 속성에 대한 데이터를
동적으로 접근할 수 있습니다
물론 이는 속성과
식별자의 이름이 정확히 동일해야 가능하므로
반드시 확인해야 합니다
버튼 클릭에 기반하여
설정하는 식별자가
EXAMPLES 객체와 일치해야 한다는 것입니다
그리고 이곳으로 내려와
h3 요소를 동적인 내용에 맞춰 설정하여
EXAMPLES 상수에 접근합니다
그리고 대괄호[]를 활용하여
속성에 동적으로 접근하는데
이는 기본 자바스크립트 문법입니다
우리가 접근하려는 속성은
selectedTopic 상태에 저장됩니다
이것으로 하나의 객체에 접근합니다
이제 h3 요소에 있는 title에
관심이 있습니다
그래서 중첩 객체에 있는 .title에 접근합니다
이제 p 요소에서
이 방법을 반복합니다
여기서 접근할 것은
description 속성입니다
이 코드에서는 code 속성입니다
이로써 선택한 버튼에 따라
다른 데이터를 접근할 수 있습니다
이제 새로고침하면
콘솔에 오류가 뜨는 것을 볼 수 있습니다
이 페이지가 처음 로딩될 때
유효한 요소를 고르지 않았기 때문입니다
초기 상태는
'Please click a button'(버튼을 클릭해주세요) 텍스트였습니다
따라서 이것을 EXAMPLES 객체의
속성 이름으로 찾고 있는 것입니다
물론 'Please click a button'이라는
속성이 없기 때문에
작동하지 않습니다
이를 일단 작업하기 위해
이 초기 상태를 컴포넌트에 설정하여
이것이 초기에 선택되도록 하겠습니다
그러고 새로고침하면 오류가 사라지고
컴포넌트 정보가 보이게 됩니다
이제 JSX를 클릭하면
JSX에 대한 정보로 변경됩니다
Props와 State를 눌러도 마찬가지입니다
이제 잘 작동하기 때문에 누르는 버튼에 따라
다른 내용을 볼 수 있게 되었습니다