이제 커스텀 버튼의 클릭을
청취할 수 있으므로
Dynamic Content를
클릭하는 버튼에 따라
내용을 바꾸고 싶습니다
그러기 위해 일단
어떤 버튼이 클릭된 것인지 알아야 합니다
그러므로 이 handleSelect 함수에서
selectedButton과 같은 매개변수를 받아들여야 합니다
여기서 selectedButton는
컴포넌트 버튼을 클릭하면 컴포넌트를
JSX 버튼을 클릭하면 JSX를
선택하는 문자열(string)이어야 합니다
여기서 버튼은 'Components', 'JSX', 'Props', 또는 'State'입니다
이 매개변수 전반에서 받는
4개의 변수입니다
그러니 무슨 버튼이 클릭됐는지에 따라
이 네 개 중 하나가 selectedButton이어야 합니다
그리고 이 동적인 내용이 적합하게
교체되는지 if 확인을 실행할 수 있습니다
클릭하는 버튼에 따라
handleSelect에 적합한 식별자가
통과되는지 확인해야 합니다
그리고 기본적으로 onSelect에 넘길 때
handleSelect 값으로 지정합니다
이 애플리케이션의
특정한 로직이기 때문에
onClick 속성에
식별자를 얻지 못할 것입니다
리액트는 당연히 해당 버튼을 클릭할 때
이러한 식별자를 원한다는 것을 알지 못합니다
그렇기 때문에 리액트에서
handleSelect를 어떻게 실행할지
통제해야 합니다
이 handleSelect 함수를 가리키는 대신에
이것을 할 수 있습니다
onSelect의 값으로 사용하는 대신에
onSelect에 화살표 함수 (arrow function)를 수행 할 수 있습니다
그러므로 handleSelct를 실행하는 대신
이 화살표 함수를 onSelect에 실행합니다
이는 물론 리액트에 독점적인 기능이 아니고
자바스크립트에서도 일반적으로 사용하는 기능입니다
이와 같은 문법을 사용해
익명의 화살표 함수를 생성할 수 있습니다
아니면 이와 같이 익명 함수를 만들어
handleSelect 를 실행할 수 있습니다
저는 조금 더 짧기 때문에
이 화살표 함수를 사용하도록 하겠습니다
이제 이 코드로 인해
익명의 화살표 함수가
onSelect에 값으로 실행되는 것을 확실하게 하고
onClick에서도 마찬가지로 실행됩니다
이로써 화살표 함수 안에서
코드를 적을 수 있습니다
실행될 화살표의 오른쪽에
익명의 함수가
실행됩니다
여기서 코드가 바로 분석되어
실행되지 않기 때문에
handleSelect를
지금 실행 시켜야 합니다
이 코드가 분석될 때
화살표 함수만 정의되기 때문에
화살표 함수 안의 코드는
아직 실행되지 않습니다
그러고 나서 이 onSelect 속성에 있는 탭 버튼에
화살표 함수가 실행됩니다
그러므로 버튼이 클릭되어
함수가 실행되면
그제서야 화살표 함수의
코드가 실행됩니다
그러므로 여기서 이제
handleSelect을 수동으로 실행할 수 있고
어떻게 실행될지 통제할 수 있습니다
예시로 컴포넌트 문자열(String) 식별자를
실행할 수 있습니다
이제부터 누르는 버튼에 따라
handleSelect에 다른 식별자를 수행할 수 있도록
모든 탭 버튼에 코드를 사용할 수 있습니다
따라서 리액트에서
이벤트에 따라 실행되는
함수를 정의하고 싶은데
어떻게 불려질지 그리고
어떤 인수를 실행할지를 통제하고 싶을 때
자주 사용하는 패턴입니다
이로 인해
이제 handleSelect에 가서
여기에 selectedBotton을 출력하여
버튼에 따라 다른 값이
나오는지 확인할 수 있습니다
이제 저장하고 개발자 도구를 열어봅니다
각각의 버튼을 누르면
오른쪽에서 각자 다른 값이
콘솔에 로그로 출력되는 것을 볼 수 있습니다
작동이 되는 것을 확인한 것입니다
이로 인해 eventHandling 함수에 커스텀 식별자와
커스텀 매개변수를 얻게 되었습니다
이로써 임시로 둔 내용을 삭제하고
Dynamic Content에서
버튼을 눌렀을 때 나올
실제 내용으로
교체할 수 있게 되었습니다