기초 정리 3편으로 돌아왔습니다.
이전 기초 정리 1, 2편을 참고 해보시면, 컴포넌트에 대해서 이해 할 수 있습니다.
그러면 이제 HTML과 스타일링을 정리 해봤으니, 이벤트에 관해 정리 해보려 합니다.
EventListening and EventHanlder
바닐자 자바스크립트를 위주로 공부 하신 분들은 이벤트라는 말을 들었을 때, 제일 먼저 떠오르는 단어는 addEventListener일겁니다.
HTML태그에 이벤트를 주는 명령어이죠. click, mouseenter, mouseleave..등등의 이벤트를 줄 수 있습니다.
말씀 드린대로 명령어 즉, 명령형 선언입니다.
하지만 이전 기초정리에서 말씀 드린 것처럼 리액트는 선언형 방식입니다. 때문에 addEventListener말고 다른 방법으로 이벤트를 줄 수 있습니다.
JSX 문법에 props로 이벤트를 넣어줍니다. 리액트에서는 기본적인 이벤트는 on으로 시작하는 props로 넘깁니다.
예를 들어 설명 해보겠습니다.
button 태그를 만들었고, 저는 이 버튼을 클릭시 title을 바꾸고 싶습니다.
클릭이벤트를 어떤식으로 줘야 할까요?
위에서 말씀 드린것처럼 button 태그에 props를 넘겨 줍니다.
클릭을 위한 이벤트는 onClick으로 말이죠.
그리고 addEventListener 명령에서 클릭 시, 콜백함수는 넣는 것처럼
props에도 콜백 함수를 넣어줍니다.
모든 이벤트 핸들러 props는 그 값으로 함수가 필요합니다.
위의 이미지를 참고 해보시면, 화살표 함수로 콜백함수를 넣었습니다. 버튼을 클릭 시, 콘솔에 해당 텍스트가 계속 찍힐겁니다.
지금은 간단한 구현을 목적으로 화살표 함수로 작성했지만, 꼭 화살표 함수를 넣을 필요는 없습니다.
복잡한 로직을 구현해야 할 경우, 함수를 정의하고 해당 함수를 지정 시켜 놓는거죠.
위의 이미지 처럼 말이죠
컴포넌트 기능이 실행되는 방법
이제 정말 title을 바꿔보려 합니다.
과연 title을 어떻게 바꿀까요?
바닐라 자바스크립트 처럼 구현을 해보겠습니다.
아마 let으로 변수를 선언 했을 시, 변수에 할당된 값을 바꿀 수 있다고 아실겁니다. 그래서 let으로 선언 후, 해당 변수의 텍스트를 바꿔주었습니다.
이제 버튼을 누르면 어떤 일이 일어날까요??
아무 일도 일어나지 않습니다.
분명 순서대로 로직을 생각 해보면 아무 문제 없습니다.
변수에 값이 할당 되지 않았을까요?
그러면 console로 찍어 확인 해보겠습니다.
TITLE이라는 변수에 텍스트가 변경된걸 확인 할 수 있습니다.
그런데 왜 DOM에는 변경된 TITLE이 반영되지 않았을까요?
저희가 작성한 컴포넌트는 함수형입니다.
그리고 이 함수의 특징은 JSX코드를 return 한다는 것이죠
이는 컴포넌트의 정의라고 정리했었습니다.
함수라는 점에서 다시 생각해보죠.
저희는 함수를 작성하면 그 함수를 어딘가에 써먹기위해 호출을 합니다.
그런데 저희가 컴포넌트를 직접 호출한적이 있던가요??
없습니다. 대신에 JSX코드안에서 작성한 적은 있죠.
그래서 리액트는 JSX코드안에 있는 저희가 작성했던 컴포넌트를 읽고 리액트가 호출합니다. 그렇게 APP 컴포넌트를 읽고 그의 자식, 형제, 자식의 자식 등등 더이상 컴포넌트로 쪼개지지 않을 때까지 리액트는 컴포넌트를 호출합니다.
그렇게 모든 컴포넌트를 읽은 후, DOM에 렌더링하게 됩니다.
이게 리액트의 컴포넌트 작동 방식입니다.
여기서 저희의 TITLE이 변화했지만, 화면에 렌더링하지 않은 이유가 나옵니다.
리액트는 컴포넌트를 반복해서 호출하지 않습니다.
즉, 저희가 구현했던 로직은 다 실행 될지라도
컴포넌트를 호출 하지 않으면 JSX는 return 되지 않습니다.
처음 렌더링된 화면만 계속 보이게 되는것이죠.
자, 그럼 TITLE이 변화하지 않은 이유도 알았습니다.
이제 어떤 방법을 써야 할까요?
state
위의 내용을 토대로 결론을 먼저 말씀드리자면, TITLE이 변화하면서 렌더링이 다시 호출되어야합니다. 즉, 리렌더링이 되야한다는 말입니다.
컴포넌트를 다시 렌더링 시키라고 명령하기 위해서 리액트 라이브러리에서 임포트할 것이 있습니다.
바로 useState라는 함수 입니다.
import React, { useState } from "react";useState는 리액트에서 제공하는 함수인데, 컴포넌트가 다시 호출되는 곳에서 변경된 값을 반영하기 위해 state로 값을 정의할 수 있게 해주는 함수입니다.
이것이 바로 일반적일 변수와 다른 점입니다.
자, 그럼 이 함수는 어떻게 사용할까요?
useState는 함수라고 말씀드렸습니다.
함수는 무언가를 return할 수도 안 할수도있지만, 이 함수는 무언가를 return 합니다. 그리고 그 return값은 배열입니다.
그 배열의 첫 번째 인자는 값을 저장하는 변수이고, 두 번째 인자는 이 변수 값의 변화를 감지하여 컴포넌트를 리렌더링 시키는 함수를 반환합니다.
그렇기 때문에 위의 이미지와 같이 구조분해할당을 이용하여 선언합니다.
암묵적으로, 변수의 이름이 있다면 변화를 감지하는 함수는 set으로 시작하고 낙타표기법으로 표현합니다.
P.S
리액트에서 use가 붙은 함수를 hook이라고 표현합니다. hook은 뒷장에서 좀더 자세히 설명드리겠습니다. useState도 react hook 입니다.
이런 hook의 한가지 주의점은, 컴포넌트 안에서 실행되어야합니다.
컴포넌트 밖에서 선언하게 되면, 오류가 뜹니다
이런 식으로 말이죠. 해석해보면 React Hook은 React 함수 컴포넌트 안에서 호출되어야한다고 적혀있습니다.
그러면 이제 title을 바꿔 볼까요.
업데이트 함수는 setTitle을 쓴다고 말씀 드렸습니다.
setTitle은 함수라고 말씀 드렸으니까, 호출 하는 방식은
setTitle();이런 식이라는걸 눈치 채실 겁니다.
그러면 파라미터에 무엇을 넣어야 할까요.
바로 변경되는 결과값을 넣어줍니다.
이런식으로 말입니다. 실행된 화면에서 클릭 후 상황을 볼까요?
title이 변경될걸 확인 할 수 있습니다.
setTitle에 대해 좀더 설명드리자면, 파라미터로 콜백 함수를 넣을 수 있습니다. 콜백함수의 파라미터는 현재 title에 할당된 값이 들어갑니다.
예를 들자면
setTitle(prev => prev + "plus string");처럼 작성하면 어떻게 될까요?
실행된 화면을 보시면
Hello Korea! 라는 초기값에 하드 코딩으로 더한 문자열이 합쳐서 리렌더링된 화면을 볼 수 있습니다.
로직은 구현할때 이전값을 참조하기 좋은 형태라고 생각합니다.
이번 정리편은 다소 어려운 내용도 포함되었다고 생각합니다.
React를 잡고 가시기 위해서는 state는 너무 중요한 개념이라고 생각하기에 다소 어렵더라도 꼭 짚고 넘어가실 바랍니다.
state가 중요한 개념이라고 말씀 드렸듯이 더 중요한 내용도 있지만,
지금 이번편에서 모든 설명을 드리면 지루해 하실겁니다.
다음편에서는 state에 관해 더 정리해보겠습니다.
감사합니다
