이제 TabButtons를 추가했으니
다음 단계는 당연히 클릭하면
무언가가 발생하도록 만드는 것입니다
물론 궁극적인 목표는
버튼을 클릭할 때 이러한 버튼 아래에
다른 콘텐츠를 표시하는 것입니다
이제 이를 위해 먼저
TabButton 컴포넌트로 이동할 수 있습니다
네이티브 버튼 요소인 내장 button 요소가
여기에 있기 때문입니다
이제 이 버튼에 Click Event Listener (클릭 이벤트 리스너)를
추가하는 것으로 시작하겠습니다
일반적인 자바스크립트에서는
querySelector 버튼과 같이
이 버튼을 선택하려고 할 것입니다
그런 다음 addEventListener 방식을
사용하여 이벤트 리스너를 추가할 수 있습니다
이를 통해, 예를 들어 클릭 이벤트를 기다리고
해당 버튼을 클릭할 때
실행되는 익명 화살표 함수와 같은
함수를 정의할 수 있습니다
자바스크립트에서 사용되는 아주 평범한 방식입니다
물론 우리는 고리타분한 자바스크립트를 작업하는 것이 아닙니다
우리는 리액트 프로젝트 작업을 하는 중입니다
리액트와 함께 작업할 때
첫 번째 과정 부분에서 배운 것처럼
이런 명령형 코드를 작성하고 싶지 않습니다
대신 선언적 코드를 작성하고 싶습니다
따라서 개발자로서 리액트와 함께 작업할 때
이런 코드로 된 페이지와 DOM으로
상호작용을 시작하고 싶지 않습니다
대신 그걸 리액트에게 시킬 것입니다
따라서 리액트에서는 이벤트 리스너를
요소에 추가하는 대신 해당 요소에
특별한 속성인 특별한 prop을 추가합니다
여기에도 prop이라고 칭할 것인데
내장 요소도 결국 컴포넌트이기 떄문입니다
리액트에서만 제공하고 이해하는
컴포넌트라고 할 수 있습니다
여기에 추가하고 싶은 특별한 prop은
onClick prop입니다
이와 같은 내장 요소는 on으로 시작하는 속성을 많이 지원합니다
보시는 것처럼 입력하고 Ctrl + Space를
눌러 이 추천 메뉴를 엽니다
안에 있는 많은 속성들을 볼 수 있을 것이고
다양한 이벤트를
들을 수 있습니다
물론 지금 여기 있는 모든 속성과 모든 이벤트가
모든 요소와 모든 활용 사례에 말이 되는 것은 아니지만
들을 수 있는 이벤트는
이론적으로 매우 다양합니다
여기 클릭 이벤트가 있는데
제가 원하는 onClick 속성입니다
버튼뿐만 아니라
모든 요소에 추가할 수도 있습니다
list 항목에도
이 onClick 속성을 추가할 수 있습니다
이 onClick 속성의 값은 함수이며
사실 모든 이벤트 속에 해당됩니다
따라서 여기서 제공해야 할 값은 함수여야 합니다
여기서 해당 이벤트가 발생할 때
실행해야 할 함수를 가리키고 싶기 때문입니다
그래서 여기에 그런 함수 추가할 수 있고
자바스크립트에서 할 수 있는
것이기 때문에
컴포넌트 함수 안에
이 컴포넌트를 정의할 수 있습니다
함수 내부에 함수를 정의할 수 있고
그런 내부 함수는 이 함수 내부에서만
호출할 수 있습니다
이 내부 함수는 여기 onClick 속에서
이에 대한 값으로 사용하기를
원하기 때문에 사용할 수 있습니다
여기에 handleClick이라는
함수를 추가할 수 있습니다
물론 함수 이름은 사용자에게 달려 있지만
특정 이벤트가 발생할 때 호출해야 하는
함수를 이와 같이 이름 짓는 것이
아주 일반적입니다
즉, 이름은 'handle'로 시작하고
실행돼야하는 함수를 합치는 것입니다
이름은 자유롭게 정할 수 있어
아무렇게나 지을 수 있지만
이건 관습입니다
상당히 많이 보이는 대안은
기본적으로
이벤트 이름을 먼저 적고
끝에 'handler'를 추가하는 것입니다
지금은 handleClick을 사용할 것입니다
여기에 console.log 명령문을 추가하겠습니다
여기서 "Hello World!"라고 console.log 해줍니다
이제 handleClick 함수를
onClick 속성의 값으로 사용할 수 있습니다
여기서 중요한 것은 8행에 있는handleClick을
실행해서는 안 된다는 것입니다
여기에 괄호를 추가하면 안 됩니다
대신 함수를 값으로 사용하고 싶기 때문에
함수의 이름을 사용해야 합니다
괄호를 추가하면 사용자가 이 함수를
실행시키게 되는데 이는 onClick에 전달되는
값이기 때문에 해서는 안됩니다
이 버튼이 클릭되면
리액트에서 실행해야 합니다
즉, 나중에 언젠가 실행되는 것입니다
하지만 여기에 괄호를 추가하면
이 코드 라인이 실행될 때
이 함수가 바로 실행됩니다
그리고 이 전체적인 컴포넌트 함수가
실행될 때와 여기에 있는 JSX 코드가
화면에 렌더링될 때 그러할 것입니다
이 기능을 실행해야
하는 시점이 아닙니다
대신 버튼을 클릭하면 리액트에 의해
시스템 뒤에서 실행되어야 합니다
그게 함수를 값을 표현하는 이유이기 때문에
여기에 단순히 함수 이름을 사용하고
onClick에 값으로서의 함수를 전달합니다
이제 저장하고
개발자 툴을 열어
버튼 중 하나를 클릭하면
"Hello World!"라는 문구가 보입니다
버튼을 클릭할 때마다 이 숫자가
증가하는 것을 볼 수 있듯이
이 문구가 계속 출력되는 것을 볼 수 있습니다
이것이 이벤트를 청취하는 방법이며
리액트 프로젝트의 이벤트에 반응할 수 있는 방법입니다
따라서 앱이 조금 더 상호작용 할 수 있게 만드는
우리의 목표를 향한 첫 번째 중요한 단계입니다