이제 조건부로
내용을 렌더링하는 방법을 배웠으니
HTML 요소의 스타일, 그 중에서도
동적인 스타일링을 배워보겠습니다
현재는
여기에서 다른 탭을 고를 수 있으나
다른 탭이 선택되었다는
시각적인 표시가 없습니다
물론 밑에 출력된 내용으로 어떤 것을 선택했는지 볼 수 있으나
선택된 탭이 하이라이트 된다면
좋을 것 같은데
지금은 그렇지 않습니다
이를 달성하기 위해 선택한 버튼에
클래스를 설정할 수 있습니다
리액트에서 클래스를 설정하기 위해
className 속성을 사용합니다
일반적인 HTML에서는
className이 아닌 클래스 속성을
사용하기 때문에 다소 이상할 수 있습니다
이 것은 JSX 특유 특이사항인데
다행히도 id와 같은 대부분의 속성은
JSX와 HTML 사이에 동일합니다
클래스 속성의 경우는 다릅니다
JSX에서는 버튼에 클래스를 추가하기 위해
className을 사용해야 합니다
index.css 파일에 준비한 것 같이
버튼에 'active' (활성화)를 추가할 수 있습니다
그 파일 안에
스타일링을 위한 active 클래스 (활성화된 클래스)에 대한 규칙이 있습니다
그래서 이것을 추가하면
모든 버튼이 활성화되어 있는 것이 보입니다
물론 우리가 원하는 결과는 아니지만
일단 스타일링이 가능하다는 것을 확인할 수 있습니다
우리의 목표는
이런 기능을 동적으로 설정하는 것입니다
동적으로 설정하기 위해
여기에 새로운 속성을 수락하고
isSelected와 같은 이름을 줍니다
이름은 여러분이 정할 수 있으나
이 속성이 어떤 값을 보유하고 있는지
알 수 있는 이름이어야 합니다
이곳에 boolean(불리언)을 사용할 수 있는데
버튼이 선택되었으면
true고
선택되지 않았으면 false입니다
이제 이 className에
중괄호를 이용하여 동적으로 설정할 수 있습니다
자바스크립트 기반 값 또는
동적인 값을 위해서 항상 중괄호를 사용합니다
여기도 또 삼항 연산자를 사용할 수 있습니다
삼항 연산자 방식으로
내용을 조건부로 출력할 수 있듯이
속성도 조건부로 설정할 수 있습니다
여기서 ifSelected가 진실이라면
className을 활성화 시키고
선택이 안됐다면
빈 문자열 또는 undefined(정의되지 않음)으로 둡니다
즉, 버튼이 선택 안됐다면 클래스가 없는 것이고
선택 됐으면 활성화된 클래스가 있는 것입니다
이 코드가 작동하려면
isSelected 속성에서 TabButton 컴포넌트로
값이 전달되는 것을 확인해야 합니다
즉, TabButton이 사용되는
앱 컴포넌트에서 입니다
이제 isSelected 속성을 추가해
한 값과 동일하게 설정합니다
이 값 또한 당연히
selectedTopic 상태에서 당연히
동적으로 파생된 것입니다
상태가 변경되면
앱 컴포넌트가 다시 실행되어
TabButtons가 재평가 됩니다
그러므로 컴포넌트와 동일한지 확인하기 위해
selectedTopic 상태를 사용합니다
지금 Components 버튼이 있기 때문에
selectedTopic이 컴포넌트 식별자와 동일하다면
true라고 나오고
그 외에는 false로 나올 것입니다
그리고 이 true나 false 값을
isSelected 속성에 전달합니다
이것을 복사해
다른 TabButtons에도 사용할 수 있게 할 수 있습니다
물론 두번째 버튼은
JSX 버튼이므로
jsx와 동일해야 하고
가독성을 높이기 위해 코드의 서식을 변경할 것입니다
여기 세 번째 버튼은
props와 동일한지 확인합니다
네 번째 버튼은 state고
이 'state' 식별자와 동일한지 확인합니다
지금 저장하고 새로고침하면
아무것도 선택되지 않은 것이 보입니다
그러나 Components를 클릭하면 이것이 선택되고
JSX를 클릭하면 이것이 선택되는 등 모두에 적합하게 적용되었습니다
CSS className을 조건부로 설정했으므로
이제 시각적인 피드백을 받을 수 있게 되었습니다