이제 이벤트가 발생하면 청취하는 방법과
이벤트가 발생하면 코드를 실행하는 방법을 배웠으니
다음 단계는 버튼 간의 내용을
바꾸는 것입니다
그래서 여기 이 콘텐츠 영역인데
버튼을 누를 때마다 업데이트하고
아래에 다른 콘텐츠를 보여주고 싶습니다
그러기 위해 앱 컴포넌트 파일인
App.jsx 파일로 돌아갑니다
menu 영역 아래
'Dynamic Content'를 출력하고 싶기 때문입니다
즉, 누르는 버튼에 따라 내용이 달라지는 것입니다
이곳에는 내장 button 컴포넌트가 없고
커스텀 컴포넌트가 있습니다
그러므로 Dynamic Content를
설정하고 업데이트하기 위해
커스텀 버튼 클릭을
청취해야 합니다
이를 위해서는 결국 모든
커스텀 컴포넌와 마찬가지로 커스텀 버튼이
Native HTML 요소, 정확히는 Native JSX 요소를
감싸야 한다는 점을 염두에 두어야 합니다
즉, 리액트에서 제공하는 내장 컴포넌트입니다
그리고 이 내장 버튼은 내장 onClick 속성
같은 것이 있습니다
따라서 여러분의 탭 버튼을 클릭할 수 있도록 만들기 위해
궁극적으로 수행하고자 하는 것은 커스텀 컴포넌트 외부에서
이 내장 버튼의 onClick 속에 대한 값을
설정하는 것입니다
이 경우에는
앱 컴포넌트 내부입니다
따라서 예를 들어, 커스텀 탭 버튼에
onClick 속성을 설정하고
이 버튼을 누를 때
활성화되는 함수를
값으로서의 함수로 받아들이면
좋을 것 같습니다
그러나 onClick 속성에 설정한 함수는
최종적으로 내장 요소에 전달되어야 합니다
거기엔 내장된 실제 onClick 속성이 있습니다
리액트에서 값으로 제공하는 함수를
실행되도록 합니다
이를 달성하기 위해 우리가 할 수 있는 일은
onClick이라고 부를 수 있는 속성을
받아오는 것입니다
여기에 객체 구조분해를 사용하여 해당 속성에 접근할 수 있습니다
우리의 커스텀 컴포넌트기 때문에
이름을 자유롭게 지을 수 있습니다
배웠다시피 children 속성은 특별합니다
리액트에서 제공한 것이고 이름이 children이어야 하지만
거의 유일하게
바꿀 수 없는 속성입니다
커스텀 컴포넌트의 다른 속성들은
이름에 제한이 없습니다
따라서 이 속성을 onClick라고
불러도 좋고 'click' 또는
'onSelect'와 같은 이름을 줄 수 있습니다
이름을 자유롭게 할 수 있는 것을
명확하게 하기 위해 이름을 onSelect라고 하고
여기에 'on' 그리고 여기에 'select'를 입력합니다
리액트 프로젝트에서 이벤트에 의해
실행되는 함수를 받아들이는
속성의 이름을 지을 때 사용하고
자주 쓰이는 또 다른 규칙 중 하나이기 때문입니다
여기에 'on'으로 시작하면
궁극적으로 특정 이벤트에 기반해
실행되는 함수에 의해
설정된다는 것을 분명히 알려줍니다
지금 계획하는 것과 같이
내부 버튼을 클릭하는 것일 수도 있지만
HTTP 요청을 완료한 것 등 필요한 모든 것이 될 수 있습니다
그러나 여기서 목표는 이 onSelect 속성을 사용하는 것으로
즉, 이 속성에 설정되는 값으로서의 함수며
여기서는 onClick의 속성을 의미합니다
그래서 이제 이 handleClick 함수를 자르고
이 TapButtom 컴포넌트를
사용하는 위치로 가서
onSelect 속성을 설정할 수 있습니다
그리고 handleClick 함수를 여기에 다시 추가합니다
여기서는 handleSelect라고 이름 지어야 아래 속성 이름을
따르기 때문에 더 적합할 것으로 보입니다
이 텍스트를 'selected'라고 업데이트해서
이 함수에서 온 것임을 확실하게 하고
이제 이 함수가
onSelect 값으로 설정됩니다
여기서 최종적으로 하는 것은 이 handleSelect
함수에 포인터를 전달하는 것입니다
onSelect 속성에
값으로서 함수를 전달하는 것입니다
이 커스텀 컴포넌트에는
이 함수를 onClick 속성에
전달하는 것이라 할 수 있습니다
결과적으로 이 버튼을 클릭하면
앱 컴포넌트에서 이 handleSelect 함수가
실행되는 것입니다
매우 흔하고 중요한 패턴으로
이를 이용해
모든 TapButton을 설정할 수 있습니다
이제 저장하고
개발도구를 다시 열면
버튼을 클릭할 때마다
"Hello World"가 선택되는 것을 볼 수 있습니다
이미 콘솔에 무언가를
출력할 수 있었기 때문에
이 시점까지 아주 많은 것을
얻은 것은 아닙니다
그러나 이제 클릭 이벤트에 반응할 수 있어
이제 이 앱 컴포넌트의
Dynamic Content를
바꿀 준비가 됐습니다
내용을 업데이트하고 싶은
동일한 컴포넌트입니다
이 내용을 포함하는 JSX 코드에 접근할 수 없어
단순히 탭 버튼 컴포넌트 내에서
반응하는 것으로
충분하지 않았을 것입니다
이제 커스텀 컴포넌트에 값으로서의 함수를
속성에 설정하는 패턴을 통해
이 JSX 코드에 영향을 미치는
이 데이터를 업데이트 할 수 있습니다