리액트 강좌

7-1.이벤트

리액트의 이벤트

웹 페이지는 실행중에 사용자와 상호작용하는데 마우스 동작이 압도적으로 많고 가끔 키보드로 입력도 한다. 또 실행중에 포커스가 이동하거나 애니메이션 시작되는 변화도 발생한다. 페이지상에서 변화가 발생할 때마다 브라우저는 이벤트를 발생시켜 반응할 기회를 제공하며 웹앱은 이벤트를 통해 사용자의 동작을 알아내고 처리한다.

리액트도 자바스크립트로 동작하는 라이브러리여서 이벤트에 관련된 처리는 자바스크립트의 경우와 별반 다르지 않다. 그러나 리액트는 고수준의 라이브러리인만큼 이벤트를 더 지능적으로 처리하는 장치가 마련되어 있다. 또 주로 JSX 안에서 이벤트를 받기 때문에 이름 규칙과 호출 방법에도 약간의 차이가 있다.

▶이벤트의 이름은 캐멀캐이스로 작성한다. 자바스크립트에서는 모두 소문자로 써 onclick으로 적지만 리액트에서는 onClick으로 적는다.

▶이벤트에는 핸들러 함수를 지정하며 코드를 직접 작성하지 않는다. onClick = { handleClick } 식으로 이름만 적는다.

▶이벤트를 개별 엘리먼트에 등록하지 않고 최상위의 루트에 등록한다. 개별 엘리먼트는 직접 이벤트를 처리하지 않고 루트에게 위임한다.

▶각 이벤트는 클릭한 버튼, 입력한 키 등 발생한 사건에 대한 추가 정보를 인수로 보내준다. 리액트는 이 모든 정보를 포함하는 합성 이벤트 객체를 생성하여 전달한다.

발생 가능한 이벤트의 종류도 자바스크립트와 거의 비슷하다. 이벤트를 보내는 주체가 브라우저이다 보니 라이브러리라고 해서 이 목록이 달라질 이유는 딱히 없다.

이벤트 종류	이벤트
마우스	onMouseDown, onMouseUp, onClick, onWheel onMouseEnter, onMouseLeave, onMouseOver, onMouseOut
키보드	onKeyDown, onKeyUp
포커스	onFocus, onBlur
스크롤	onScroll
클립보드	onCopy, onCut, onPaste
드래그 & 드롭	onDragStart, onDragEnter, onDragLeave, onDragEnd onDragOver, onDrop

각 이벤트의 발생 시점은 이름에 잘 드러나 있어 상세한 설명은 생략한다. 사실 이벤트의 의미와 사용 방법은 자바스크립트에서 이미 배우고 왔어야 학습 순서에 맞다. 이벤트 처리 순서를 지정하는 버블링/캡처링, stopPropagation, preventDefault 등의 함수는 자바스크립트 서적을 참고하자.

이벤트 객체

이벤트 발생시 전달되는 추가 정보는 브라우저마다 미세하게 달라 예전부터 호환성을 확보하기 어려웠다. 심지어 같은 브라우저라도 버전에 따라 달라지니 골치 아프고 오만 꼼수를 동원해야 했다.

리액트는 이런 문제를 해결하기 위해 모든 정보를 포함하는 합성 이벤트(SyntheticEvent) 객체를 전달한다. 새로 설계한 것이지만 호환성이 어느 정도는 있어 기존의 알고 있던 지식대로 사용하면 된다. 먼저 이벤트에 상관없이 전달되는 공통 멤버부터 정리해 보자.

멤버	설명
target	이벤트가 발생한 엘리먼트
currentTarget	이벤트가 등록된 엘리먼트
timeStamp	이벤트 발생 시점
nativeEvent	자바스크립트의 이벤트 객체에 대한 래핑 객체. 리액트가 제공하지 않는 인수는 이 멤버를 통해 조사한다.
bubbles	이벤트가 버블링되는지 여부. true이면 자식이 이벤트를 먼저 받는다.
eventPhase	이벤트 처리 단계. 0이면 미처리이고 1이면 캡처, 2면 타겟, 3이면 버블링중이다.
cancelable	preventDefault 메서드로 처리를 중단할 수 있는지 조사한다.
defaultPrevented	preventDefault로 처리를 중단했는지 조사한다.
isTrusted	이벤트가 사용자에 의해 발생했는지 조사한다.
type	발생한 이벤트의 종류. click, change 등

이 정보중 가장 흔하게 사용되는 멤버는 target이다. 이벤트가 발생한 엘리먼트, 즉 태그에 대한 참조인데 이로부터 태그의 id나 현재값을 조사한다. 다음은 키보드 관련 이벤트의 멤버이다. 누른 키와 조합키의 상태를 보여준다.

멤버	설명
key	누른 키의 값
ctrlKey	Ctrl 키를 누르고 있으면 true
altKey	Alt 키를 누르고 있으면 true
shiftKey	Shift 키를 누르고 있으면 true
metaKey	Win(맥은 Command) 키를 누르고 있으면 true

다음은 마우스 관련 이벤트의 멤버이다. 키보드 조합키의 상태를 알려주는 멤버는 마우스 이벤트에서도 유효하다.

멤버	설명
button	어떤 버튼을 눌렀는지 알려 준다. 0은 왼쪽, 1은 중앙, 2는 오른쪽 버튼이다.
buttons	두 개 이상의 버튼을 눌렀을 때의 합을 조사한다. 1은 왼쪽, 2는 오른쪽, 4는 가운데 버튼이다.
screenX, Y	화면상의 좌표
clientX, Y	브라우저상의 좌표
pageX, Y	페이지상의 좌표
movementX, Y	직전 이벤트와의 이동거리

이벤트를 잘 활용하려면 언제 어떤 이벤트가 발생하는지, 이벤트에서 참조할 수 있는 인수에는 어떤 것이 있는지를 잘 알아야 한다. 이런 정보는 레퍼런스에 정리되어 있지만 확실한 것은 예제를 만들어 직접 찍어 보는 것이다.

다음 예제는 h2 엘리먼트에 대해 마우스 이벤트를 받고 input 엘리먼트에 대해 키보드 이벤트를 받아 어떤 정보가 전달되는지 로그창에 덤프한다. 가장 기본적인 두 개의 이벤트를 연구해 보는데 같은 방식으로 다른 이벤트도 연구해 볼 수 있다.

function App() {

function h2Click(e) {

console.log(`클릭 : ID=${e.target.id}, 버블=${e.bubbles}`)

}

function h2Down(e) {

console.log(`다운 : 브라우저=(${e.clientX}, ${e.clientY}), 화면=(${e.screenX}, ${e.screenY})`)

}

function h2Up(e) {

console.log(`업 : 태그 좌표 = (${e.nativeEvent.offsetX}, ${e.nativeEvent.offsetY})`)

}

function inKeyDown(e) {

console.log(`키 누름 : 키 =${e.key}, 시간=${e.timeStamp}`)

}

function inKeyUp(e) {

console.log(`키 놓음 : Ctrl = ${e.ctrlKey}, Alt = ${e.altKey}, Shift = ${e.shiftKey}`)

}

return (

클릭하세요.

</h2>

</>

)

}

실행해 놓고 마우스로 h2를 클릭해 보고 input에 키를 눌러 보자. 마우스를 눌렀을 때의 좌표, 키를 눌렀을 때 눌러진 키에 대한 정보 등을 볼 수 있다.

웹 앱은 이 정보를 통해 클릭한 좌표나 입력한 키에 따라 필요한 처리를 수행한다. 이런 식으로 예제를 작성해 객체를 덤프해 보면 처리가 필요한 시점과 이때 사용할 수 있는 정보를 정확히 파악할 수 있다.

앞 실습에서 이미 마우스 클릭 이벤트인 onClick에 반응하여 카운트를 증가시키거나 타이머를 시작/중지하는 예제를 만들어 보았다. 카운트를 1 증가시키는 코드를 다시 보자.

function increase() { setCount(count + 1) }

이벤트 이름이 onclick이 아닌 onClick이다. 또 핸들러의 이름만 지정하며 {increase()} 식으로 호출하지 않는다는 점을 분명히 알 수 있다. 클릭은 눌렀다 떼는 단순한 동작이어서 핸들러로 클릭 사실만 통지 받으면 된다. 버튼의 가운데를 누르나 가장자리를 누르나 똑같은 클릭이어서 구분할 필요가 없다.

그러나 똑같은 동작이라도 사용자의 구체적인 동작이나 시스템의 현재 상황 등의 추가 정보가 필요하면 이벤트 객체를 받아야 한다. 예를 들어 이미지의 어느 부분을 눌렀는지, 클릭했을 때 키보드 조합키의 상태는 어땠는지에 따라 처리를 달리 하고 싶을 때이다. 다음 예제는 h2 엘리먼트를 클릭할 때 Shift 키의 상태에 따라 다른 동작을 한다.

function App() {

function handleClick(e) {

if (e.shiftKey) {

alert('Shift 클릭');

} else {

alert('그냥 클릭');

}

return (

<h2 onClick = {handleClick}>클릭하세요</h2>

</>

);

}

핸들러는 이벤트 객체 e를 인수로 받으며 e.shiftKey의 값을 읽어 클릭 발생 시점의 Shift키 상태를 알아낸다. 이벤트 객체에는 실용적으로 참고할만한 모든 정보가 다 포함되어 있어 상황에 따라 이벤트를 다르게 처리할 수 있다.

합성 이벤트 객체라고 해서 모든 정보가 다 포함되어 있는 것은 아니며 주로 많이 사용하는 정보만 전달한다. 자바스크립트에는 클릭한 태그내의 좌표를 조사하는 offsetX, offsetY 값이 있다. 다음 스크립트 예제는 헤더의 좌상단 기준으로 어디쯤을 눌렀는지 대화상자로 출력한다.

예제 : offsetxy.html

<!DOCTYPE html>

<html>

<head>

<title>onlyscript</title>

</head>

<body>

<h1 id="header">클릭하세요</h1>

let header = document.getElementById("header");

header.onclick = function(e) {

alert(`태그내 좌표 = (${e.offsetX}, ${e.offsetY})`);

}

</script>

</html>

그러나 리액트의 이벤트 객체에는 이 정보가 빠져 있다. 대신 원래 자바스크립트의 이벤트 객체를 nativeEvent로 제공하므로 이 객체의 속성을 읽으면 된다. 뭘 좋아할지 몰라 이것 저것 다 넣어 놓은 것이다. 사실 이 정보를 사용할 일은 거의 없는데 꼭 필요하다면 쓸 수는 있다. 같은 동작을 하는 리액트 예제를 만들어 보고 차이점을 연구해 보자.

function App() {

function handleClick(e) {

alert(`태그내 좌표 = (${e.nativeEvent.offsetX}, ${e.nativeEvent.offsetY})`);

}

return (

<h1 id="header" onClick = {handleClick}>클릭하세요</h1>

</>

);

}

e.offsetX가 아닌 e.nativeEvent.offsetX를 읽는다는 점을 유의하자. 자바스크립트가 제공하는 원래 객체도 전달해 주므로 예전에 가능했던 코드를 리액트에서도 활용할 수 있다.

이벤트 위임

Shift 검출 예제를 다시 점검해 보자. 이벤트를 지정할 때는 onClick = {handleClick}으로 이름만 지정했는데 핸들러는 handleClick(e)로 되어 있어 이벤트 객체 e를 전달받는다. 호출할 때 주지도 않은 인수를 핸들러가 어떻게 받는 것일까? 이게 가능한 이유는 리액트가 이벤트를 최상위 요소인 루트에게 위임하기 때문이다.

리액트의 이벤트 지정문은 DOM 노드에 핸들러를 직접 붙이지 않는다. 대신 최상위 요소인 document에 리스너를 설치해 놓고 모든 이벤트를 모아서 처리한다. 이벤트가 자식 엘리먼트에서 발생하더라도 직접 처리하지 않고 버블링되어 리스너로 전달된다. 즉, 모든 이벤트는 리스너가 받도록 위임한다.

리스너는 네이티브 이벤트를 받아 타겟에 맞는 이벤트 객체를 새로 합성하여 핸들러로 전달한다. 핸들러는 합성 이벤트 객체에서 원하는 정보를 조사하여 마치 타겟이 직접 이벤트를 받은 것처럼 처리한다. 이런 구조로 되어 있기 때문에 핸들러는 무조건 이벤트 객체 e를 받을 수 있다.

이벤트 객체에는 누가 받은 이벤트인지 알려 주는 target 정보가 포함되어 있다. 이 정보를 활용하면 여러 요소가 핸들러 하나를 공유하고 target에 따라 처리를 다르게 할 수 있다. 다음 예제는 세 개의 h3 엘리먼트가 클릭 핸들러를 공유한다.

function App() {

function handleClick(e) {

alert(`${e.target.innerText}를 클릭했습니다.`);

}

return (

</>

);

}

같은 핸들러를 공유하지만 핸들러 내부에서 읽는 e.target.innerText가 달라 클릭한 요소에 따라 처리를 달리할 수 있다. 대부분의 처리가 같고 일부만 다를 때는 비슷한 핸들러를 따로 만들 필요없이 통합하는 것이 간편하다.

이벤트 위임 방식은 이벤트 객체를 알아서 전달해 주므로 편리하다. 그러나 핸들러에 추가적인 인수를 전달하는 것은 좀 복잡하다. 이런 기법이 필요한 경우는 많지 않으므로 간단하게 예제만 보인다.

function App() {

function handleClick(e, fruit) {

alert(`${e.target.innerText}는 ${fruit}를 좋아합니다.`);

}

return (

<h3 onClick = {(e) => handleClick(e, '사과')}>첫째</h3>

<h3 onClick = {(e) => handleClick(e, '딸기')}>둘째</h3>

<h3 onClick = {(e) => handleClick(e, '포도')}>셋째</h3>

</>

);

}

이벤트 객체 외의 인수를 더 추가하려면 핸들러를 호출하면서 인수를 전달하는 구문을 사용해야 한다. 그러나 리액트의 이벤트는 핸들러를 지정하는 형식이며 호출하는 형식이 아니어서 다음 코드는 안된다.

대신 이 핸들러를 호출하는 익명 함수를 작성해야 한다. 이름이 없어도 어쨌거나 핸들러를 호출한게 아니라 익명 핸들러를 지정하는 것이므로 이건 괜찮다. 익명 핸들러는 이벤트 객체를 인수로 받아 핸들러로 전달하면서 그 외의 인수를 추가로 더 전달한다.

리액트가 이벤트 객체 하나는 자동으로 전달해 주지만 사용자가 정의한 인수까지 전달할 수는 없다. 이벤트 객체 외의 추가 인수는 개수에 상관없이 수동으로 직접 전달할 수 있다. 타겟마다 달라지는 내용은 인수보다 컴포넌트의 속성에 포함시켜 두는 것이 바람직하다.

키보드 입력

키보드 입력은 포커스를 가진 컨트롤에게 발생하는데 주로 input 컨트롤이다. 매 키를 누를 때마다 onKeyUp, onKeyDown 이벤트가 발생하며 여기서 이벤트 객체의 key 멤버를 읽으면 어떤 키를 눌렀는지 알 수 있다. 입력한 키 정보는 유효성 검사에 주로 사용한다. 다음 예제는 숫자만 입력받으며 그 외의 문자는 경고 메시지를 출력한다. 점수나 나이라면 숫자만 입력받아야 한다.

function App() {

function inKeyDown(e) {

if (Number.isInteger(Number(e.key)) == false) {

alert('숫자만 입력하세요.');

e.preventDefault();

}

return (

</>

)

}

e.key로 전달된 문자를 숫자로 바꿔 보고 정수가 맞는지 점검한다. 맞으면 아무 일도 일어나지 않고 틀리면 에러 메시지를 출력하고 preventDefault 메서드를 호출하여 이벤트 처리를 중지해 버린다. 이러면 마지막 입력한 문자는 거부된다.

input은 입력을 받는 가장 기본적인 엘리먼트이며 내용이 바뀔 때를 처리해야 할 경우가 많다. 자바스크립트는 input 태그에 대해 2개의 이벤트를 제공하는데 발생 시점을 잘 구분해야 한다.

▶oninput : 내용이 바뀔 때마다 전달된다.

▶onchange : 편집을 완료하고 포커스를 잃을 때 전달된다.

다음 예제로 확인해 보자. 입력할 때마다 input 이벤트가 발생하고 tab키를 눌러 포커스를 잃을 때만 change 이벤트가 발생한다.

예제 : editevent.html

<!DOCTYPE html>

<html>

<head>

<title>onlyscript</title>

</head>

<body>

let score = document.getElementById("score");

score.onchange = function(e) {

console.log("change : " + e.target.value);

}

score.oninput = function(e) {

console.log("input : " + e.target.value);

}

</script>

</body>

</html>

리액트의 input 컴포넌트에서 onChange는 자바스크립트의 onchange와 의미가 약간 다르다. 매 입력시마다 발생하며 한글자라도 바뀌면 이벤트를 보내 주는 식이라 발생 빈도가 높다. 자바스크립트와 대부분 비슷하지만 약간 다르게 동작하는 경우도 있다.

매 글자를 입력할 때마다 이벤트를 받고 싶지는 않고 입력 완료 후에 한번만 읽고 싶다면 포커스를 잃을 때 발생하는 onBlur 이벤트를 활용한다. 위 예제와 비슷하게 동작하는 리액트 예제는 다음과 같다.

function App() {

function inChange(e) {

console.log("change : " + e.target.value)

}

function inBlur(e) {

console.log("blur : " + e.target.value)

}

return (

</>

)

}

이 지점에서 리액트가 왜 표준 자바스크립트와 이벤트의 발생 시점을 굳이 다르게 처리하고 있는지, 어떤 속사정이 있는지 연구해 보자. onChange가 편집끝이 아닌 수정시마다 발생하도록 의미를 바꾼 이유는 여러 가지가 있다.

▶리액트는 상태가 바뀌면 UI도 실시간으로 바뀌도록 하고 싶었다.

▶매 편집마다 유효성 검사를 수행하여 정확한 정보를 입력하도록 유도한다.

▶자동 완성 기능을 구현하기 쉽다.

▶과거에 비해 컴퓨터 성능이 향상되어 매번 이벤트를 보내도 무리가 없다.

이유를 들어 보면 합당한 근거는 분명히 있다. 그러나 그렇다 치더라도 표준에 매 수정시마다 발생하는 onInput 이벤트가 이미 있는데 굳이 onChange의 의미를 무리하게 바꿀 필요까지는 없지 않았을까? 여기에는 또 다른 복잡한 사정이 있다.

onInput 이벤트가 표준에 분명히 있지만 과거의 느린 컴퓨터에서는 엄청난 부하를 일으켜 지원하지 않는 브라우저가 많았다. 설사 지원하더라도 컨트롤에 따라 동작 방식이 미세하게 달랐다. 이런 식이니 그 당시의 개발자가 매 편집시점을 잡아 내느라 얼마나 개고생을 했을지 짐작이 된다.

리액트 팀은 이런 상황을 일거에 해소하기 위해 onChange의 의미를 바꾸는 한이 있더라도 일관된 동작을 구현하고 싶었고 그 결과 표준과는 약간 달라진 것이다. 사실 리액트는 자바스크립트와는 다른 개발 환경이므로 이벤트의 의미가 꼭 같을 필요는 없다. 합리적인 이유가 있는 변화라면 받아들이고 익숙해지는 수밖에 없다.

마우스 좌표 점검

마우스가 컴포넌트 위로 올라오면 onMouseOver 이벤트가 발생하며 벗어나면 onMouseOut 이벤트가 발생한다. 요즘은 클릭을 최소화하기 위해 마우스를 올리기만 해도 반응하는 기법이 유행이다. 두 이벤트를 활용하여 사용자가 관심을 보이는 컴포넌트를 강조한다.

function App() {

function mouseOver(e) {

e.target.innerText = "비켜! 안 보여"

}

function mouseOut(e) {

e.target.innerText = "잘 보이는군"

}

return (

마우스를 올려 보세요.

</h2>

</>

)

}

변화를 명확히 확인할 수 있도록 태그의 내용을 바꿨다. 커서를 컴포넌트 쪽으로 넣었다 뺐다 해 보자.

스타일로 배경 색상만 살짝 바꾸어 활성 상태로 표시할 수도 있고 이미지를 통째로 교체하여 아예 다른 모양을 보여줄 수도 있다. 쇼핑몰이나 게시판에서 광범위에 사용하는 기법이다.

onMouseEnter, onMouseLeave 이벤트도 있는데 중첩되어 있을 때 자식 요소 위에서는 이벤트가 발생하지 않는다는 미세한 차이가 있다. 이런 차이를 잘 구분하고 정확한 이벤트를 받아야 매끄러운 프로그램이 된다.

7-2.성적 처리앱

문자열 입력

여기까지 리액트의 핵심적인 기능은 대부분 연구해 보았다. 아직 더 배워야 할게 남아 있지만 배운것만 활용해서라도 실용적인 앱을 제작해 보며 실무에서 적용되는 문법을 실습해 보자. 그렇다고 아주 거대한 주제는 아니며 단순히 성적값를 입력받아 저장하는 간단한 예제이다.

이 정도 예제는 쉬운 편이지만 리액트스럽게 만드는건 생각보다 난해하다. 리액트의 특성을 이해하고 리액트의 장점을 최대한 활용할 수 있는 구조를 만들어야 한다. 예제만 보지 말고 직접 만들면서 리액트의 어떤 기능을 활용할 것인지 잘 생각해야 한다. 일단 학생 이름을 입력받아 아래쪽에 표시는 간단한 앱부터 만들어 보자.

function ScoreBoard() {

const [newStudent, setNewStudent] = useState('');

const [student, setStudent] = useState('');

function updateNewStudent(e) {

setNewStudent(e.target.value)

console.log(newStudent)

}

function displayStudent() {

setStudent(newStudent)

}

return (

<p>{student}</p>

</>

)

}

function App() {

return (

</>

);

}

입력을 받아야 하니 input 컨트롤이 필요하고 입력 완료를 명령할 button과 입력한 내용을 표시할 문단이 필요하다. 입력중인 이름과 이미 입력한 이름은 랜더링중에 저장되어야 하므로 둘 다 상태로 정의했다. 최초 값이 없으므로 초기값은 둘 다 빈 문자열이다.

사용자가 인풋에 타이핑을 할 때마다 onChange 이벤트를 받아 newStudent 상태를 갱신한다. 표시 버튼을 누르면 onClick에서 student 상태를 newStudent로 대입한다. 버튼 아래쪽의 <p> 문단은 입력받은 student 상태를 출력한다. 처음에는 비어 있지만 입력 후 표시 버튼을 누르면 내용이 보인다.

인풋에 입력한 값을 아래 문단으로 보내 확인하는 것 뿐이다. 수정해서 버튼을 다시 누르면 수정한 값으로 다시 바뀐다. 사용자의 입력을 받고 그 값을 사용한다는 면에서 가장 기본적인 상호작용 예제인 셈이다.

인풋에 입력된 내용을 상태로 정의하고 onChange 이벤트에서 항상 업데이트하고 있어 사용자가 입력한 값과 newStudent의 상태값은 언제나 같다. 이처럼 리액트가 입력폼을 직접 관리하는 방식을 제어 컴포넌트(Controlled Component)라고 한다. 입력값과 상태값이 동기화되므로 여러 가지 이점이 있다.

▶ 실시간 유효성 검사를 할 수 있다. 사용자가 한 글자 칠때마다 onChange 이벤트가 발생하므로 규칙에 맞는지 바로 확인 가능하다.

▶ 사용자의 입력을 통제할 수 있다. 사람 이름에 숫자를 쳐 넣으면 안되며 이름이 없어서도 안된다. 사용자가 실수를 하는 즉시 알려 주고 수정을 요구할 수 있다.

▶ 주변 UI를 통제하기 쉽다. 이름을 입력하지 않은 상태에서는 표시 버튼을 눌러 봐야 의미 없다. 뭔가 입력해야 표시 버튼을 활성화하는 것이 맞다.

값이 항상 정확하니 여러 모로 활용할 데가 많다. 그러나 이 방식이 항상 바람직한 것은 아니다. 매 입력시마다 상태가 바뀌므로 랜더링이 다시 발생하여 속도는 떨어진다. 표시 버튼을 누르기 전에는 보여 주지도 않을건데 ㅇ, 이, 잇, 이순 식으로 한 음소를 칠 때마다 다시 그린다는 것은 낭비이다.

비제어 컴포넌트

제어 컴포넌트의 반대 개념은 비제어 컴포넌트(Uncontrolled Component)이다. 리액트는 입력 폼에 대해 아무것도 하지 않고 DOM이 알아서 관리하도록 내버려 둔다. 사용자가 타이핑을 하는 중에는 인풋 컨트롤이 알아서 자신을 다시 그릴 뿐 나머지 화면은 가만히 둔다. 그리고 표시 버튼을 누를 때처럼 이 값이 필요할 때 값을 읽는다.

비제어는 입력값을 동기화하지 않으므로 상태를 유지할 필요는 없고 대신 필요할 때 입력값을 읽을 수 있는 참조만 가지면 된다. 앞 예제에서 newStudent 상태를 없애고 인풋만 참조로 정의한다. 이럴 때 사용하는 훅이 useRef이다.

function ScoreBoard() {

const newStudent = useRef(null);

const [student, setStudent] = useState('');

function displayStudent() {

setStudent(newStudent.current.value)

}

return (

<p>{student}</p>

</>

)

}

function App() {

return (

</>

);

}

내부적인 실행 과정은 다르지만 밖에서 보기에는 완전히 같은 동작을 하며 내부적으로는 더 효율적이다. 어떤 부분이 바뀌었는지 보자.

① newStudent는 상태가 아닌 참조이다. useRef로 참조한다는 것을 표시하되 초기값을 null로 지정한다.

② 실제 참조할 컨트롤의 ref 속성에 참조명을 지정한다. input에 newStudent참조를 지정했다.

③ 인풋의 초기값은 value 속성이 아닌 defaultValue 속성으로 지정한다. value로 지정하면 값이 고정되어 버려 사용자가 입력해도 바뀌지 않는다.

④ 참조하는 객체는 current 속성으로 읽고 입력값은 value 속성으로 읽는다. 표시 버튼을 누르면 이 값을 읽어 student 상태에 대입한다. 사용자가 입력한 값이 아래쪽 문단에 나타난다.

⑤ 필요할 때 값을 읽는 방식으로 바꾸었으므로 onChange 이벤트는 필요치 않다.

코드가 단순해지고 입력중에 랜더링이 발생하지 않아 효율적이지만 실시간으로 변화를 감시할 수 없다는 약점이 있다. 필요에 따라 두 방식 중 하나를 선택하되 이 예제의 경우 기록 버튼을 누르기 전에는 굳이 읽을 필요가 없으므로 상태로 정의하지 않아도 무방하다.

리액트는 가급적 제어 컴포넌트를 사용하여 유효성 점검, UI 갱신 등을 제대로 처리할 것은 권장한다. 랜더링이 자주 발생해도 가상 DOM 덕분에 깜박거리지 않으며 어차피 사람 입력 속도보다 빠르면 아무 문제가 없다. 그러나 규모가 크고 복잡하거나 리액트가 아닌 다른 라이브러리와 함께 동작할 때는 비제어 컴포넌트가 유리하다.

객체화

입력 실습을 위해 이름만 입력 받았는데 이름에 해당하는 부가 정보가 더 필요하다. 성적 관리 앱을 만들고 있으니 당연히 성적도 입력 받아야 한다. 두 개의 컨트롤을 배치해야 하고 각 컨트롤의 입력값을 유지해야 하니 상태도 그만큼 있어야 한다. 학생의 이름뿐만 아니라 점수를 저장할 score 상태를 하나 더 추가하면 될 거 같다.

const [student, setStudent] = React.useState('');

const [score, setScore] = React.useState('');

이렇게 해도 이름과 점수를 저장하는데 이상은 없다. 그러나 학생과 점수는 하나의 묶음이라 뗄 수 없는 관계이며 이후 점수 외에 더 많은 정보가 추가될 수도 있다. 하나로 묶어야 하며 이럴 때 쓰는게 객체이다. 상태를 객체로 정의하면 간편하고 확장성도 좋아진다. 속성을 무한대로 늘릴 수는 없으니 적당한 때에 조직화해야 한다.

입력 컨트롤이 여러 개이므로 설명을 위한 레이블을 붙이고 레이블과 컨트롤의 짝을 짓기 위해 id 속성도 지정한다. 인풋에 id를 지정하고 레이블에 htmlFor 속성을 지정해 두면 레이블을 클릭할 때 연결된 컨트롤로 포커스가 이동한다. HTML에서는 for 속성으로 지정하지만 JSX에서는 htmlFor임을 유의하자.

function ScoreBoard() {

const newStudent = useRef(null);

const newScore = useRef(null);

const [scoreItem, setScoreItem] = useState({

student : '이름',

score : 100

});

function displayScoreItem(e) {

setScoreItem({

student : newStudent.current.value,

score : newScore.current.value

})

}

return (

<p>{scoreItem.student} : {scoreItem.score} </p>

</>

)

}

function App() {

return (

</>

);

}

상태가 이제는 학생이 아니라 학생, 점수를 묶은 객체이므로 scoreItem으로 이름을 붙였다. 초기값으로 student와 score 멤버를 가짐을 명시하고 출력할 때 컨트롤에 입력한 값을 읽어 상태를 업데이트한다. 문단은 학생의 이름과 점수를 표시한다.

성적을 객체로 정의했으므로 객체의 멤버만 늘리면 얼마든지 더 많은 정보를 포함할 수 있다. 멤버의 수가 당장은 많지 않더라도 앞으로 늘어날 가능성이 있다면 아예 객체로 정의하는 것이 확장에 유리하다.

객체의 배열

성적표라면 여러 명의 성적을 한 눈에 알아 보기 쉽도록 표시해야 한다. 한 명의 성적 데이터를 객체로 정의했으므로 이제 이 객체의 배열을 만들면 된다. 자료구조가 확장되고 복수 개의 데이터를 입력 받으려면 많은 변화가 필요하다.

function ScoreBoard() {

const newStudent = React.useRef(null);

const newScore = React.useRef(null);

const [scoreItem, setScoreItem] = useState([])

function addScoreItem(e) {

setScoreItem([

...scoreItem,

{

student : newStudent.current.value,

score : newScore.current.value

}

])

newStudent.current.value = ''

newScore.current.value = ''

newStudent.current.focus()

}

return (

<ol>

{scoreItem.map((s, index) => (

<li key={index}>{s.student} 학생 : {s.score}점 </li>

))}

</ol>

</>

)

}

function App() {

return (

</>

);

}

scoreItem은 초기값을 [] 빈 배열로 정의한다. 어떤 타입에 대한 배열인지는 정의하지 않았는데 추가할 때 결정된다. 입력한 정보를 계속 누적하므로 버튼의 캡션을 '표시'가 아닌 '추가'로 바꾸었다. addScoreItem 핸들러는 새로 입력받은 점수 정보를 배열에 추가한다. 새로 입력받은 정보를 추가하는 것이지 바꾸는게 아니므로 다음 코드가 아님을 유의하자.

setScoreItem([

{

student : newStudent.current.value,

score : newScore.current.value

}

])

이 코드는 새로 입력받은 정보로 하나의 객체를 생성하고 배열에 이 객체 하나만 삽입한다. 이렇게 되면 이전에 입력해 놓은 정보는 모두 사라지므로 추가가 아닌 변경이다. 코드에 있는 ...scoreItem은 지금까지 입력된 정보를 모두 나열하라는 뜻이며 여기에 새로운 정보를 더 추가하라는 명령이 된다.

성적 정보를 이어서 계속 입력하려면 컨트롤을 비워 주고 포커스를 옮기는 처리도 반드시 필요하다. 이 기능이 없으면 사용자가 일일이 마우스로 포커스를 옮기고 기존 입력 내용을 지워야 하니 굉장히 불편해진다.

본문에는 순서있는 목록을 작성하고 각 성적 정보를 map 함수로 순회하며 학생과 점수를 출력한다. key는 순서값으로 지정했으며 입력 순서대로 학생의 번호도 매겼다. 그럴 듯한 성적표가 화면에 나타난다.

수동으로 어떤 정보를 연속 입력받는 예제를 만들어 봤는데 리액트의 여러 기능을 써 본다는 학술적인 의미는 있다. 실무에서는 이 보다 양이 많을 때 보통 그리드 컨트롤을 사용하는 것이 좋다.

성적의 배열

성적표에는 과목이 하나만 있는게 아니다. 배열안에 객체가 들어 있는 형태인데 이제 객체안에 또 배열을 넣을 수 있다. 이것 저것 성적을 많이 넣어보면 실감나지만 실습이 번거로우니 영어, 수학 두 개의 과목만 넣어 보자. 과목이 늘어나면 총점과 평균에 대한 계산도 필요하다.

function ScoreBoard() {

const newStudent = useRef(null);

const newEng = useRef(null);

const newMat = useRef(null);

const [scoreItem, setScoreItem] = useState([])

function addScoreItem(e) {

const eng = Number(newEng.current.value)

const mat = Number(newMat.current.value)

setScoreItem([

...scoreItem,

{

student : newStudent.current.value,

score : [eng, mat],

total : eng + mat,

avg : (eng + mat) / 2

}

])

newStudent.current.value = ''

newEng.current.value = ''

newMat.current.value = ''

newStudent.current.focus()

}

return (

<ol>

{scoreItem.map((s, index) => (

{s.student} 학생 : 영어 {s.score[0]}점 수학 {s.score[1]}점

총점 : {s.total} 평균 : { s.avg.toFixed(2)}

</li>

))}

</ol>

</>

)

}

function App() {

return (

</>

);

}

인풋으로 입력받은 값은 문자열이지 계산할 수 있는 숫자가 아니므로 Number 함수로 정수로 바꾼 후 계산해야 한다. 유효성 점검은 하지 않고 있어 점수를 잘못 넣어도 아직 처리하지 못한다. 에러는 발생하지 않지만 NaN으로 표시된다. 평균은 소수점 이하 2자리까지만 출력한다.

총점과 평균은 사용자가 입력한 정보가 아니라 성적으로부터 계산한 값이므로 굳이 상태 객체에 포함하지 않아도 된다. 출력 속도 향상을 위해 미리 계산해 두었지만 출력할 때 계산하는 것도 가능하다.

삭제

성적을 잘못 입력할 수도 있으니 삭제 기능도 필요하다. 개별 항목에 삭제 버튼을 배치하고 클릭시 그 항목을 삭제한다. 모든 성적을 다 지우는 초기화 기능도 넣어 보자. 매번 성적을 입력한 후 테스트하기 귀찮으므로 상태의 초기값을 작성하여 3명의 성적을 샘플로 미리 입력해 놓았다.

function ScoreBoard() {

const newStudent = useRef(null);

const newEng = useRef(null);

const newMat = useRef(null);

const [scoreItem, setScoreItem] = useState([

{student : '이순신', score : [88, 92], total : 88 + 92, avg : (88 + 92) / 2},

{student : '김유신', score : [75, 68], total : 75 + 68, avg : (75 + 68) / 2},

{student : '강감찬', score : [92, 95], total : 92 + 95, avg : (92 + 95) / 2},

])

function addScoreItem(e) {

const eng = Number(newEng.current.value)

const mat = Number(newMat.current.value)

setScoreItem([

...scoreItem,

{

student : newStudent.current.value,

score : [eng, mat],

total : eng + mat,

avg : (eng + mat) / 2

}

])

}

function delScoreItem(e) {

setScoreItem(

scoreItem.filter((s, index) =>

index != Number(e.target.dataset.index))

)

}

function resetScoreItem(e) {

setScoreItem([])

}

return (

<ol>

{scoreItem.map((s, index) => (

{s.student} 학생 : 영어 {s.score[0]}점 수학 {s.score[1]}점

총점 : {s.total} 평균 : { s.avg.toFixed(2)}

</li>

))}

</ol>

</>

)

}

function App() {

return (

</>

);

}

삭제할 대상을 지정하려면 각 항목마다 체크 박스를 붙이는 방법도 있지만 개별 항목 옆에 삭제 버튼을 따로 배치하는 방법이 간편하다. 버튼별로 삭제할 대상을 기억해야 하는데 이를 위해 data-index 속성에 순서값을 저장해 두었다. 저장한 순서값은 e.target.dataset 객체로 읽는다. 이 기능은 리액트와는 상관없고 HTML5에서 도입한 것이며 data- 다음에 원하는 속성을 지정하면 이 속성과 값이 dataset의 객체로 저장되어 이벤트 핸들러로 전달한다. 여러 개의 속성을 한꺼번에 전달할 수 있다.

예를 들어 data-name, data-addr 두 개의 속성을 버튼에 지정해 놓으면 이벤트 핸들러로 이 두 속성에서 data- 이후의 이름을 멤버로 가지는 dataset 객체가 전달된다. 단, 이름이 여러 단어일 경우는 캐멀케이스로 전환하는데 data-user-name으로 이름을 붙이면 전달할 때는 userName이 된다.

삭제 버튼을 누르면 filter 메서드로 index가 다른 것만 골라내 새로운 배열을 만들고 이를 setScoreItem으로 전달한다. 배열에서 한 요소만 지울 때는 splice 메서드로 index 위치를 지정하는 간단한 방법이 있지만 이 방법을 쓸 수는 없다.

function delScoreItem(e) {

scoreItem.splice(e.target.dataset.index, 1);

}

이 코드에 의해 배열에서 삭제는 되지만 랜더링이 안된다. 이 코드가 왜 안되는지 헷갈린다면 한참 전에 배운 카운터 예제에서 count++이 왜 동작하지 않는지 상기해 보자. 정 이 방법을 쓰고 싶다면 다음과 같이 작성한다.

function delScoreItem(e) {

const temp = [...scoreItem]

temp.splice(e.target.dataset.index, 1);

setScoreItem(temp);

}

사본을 먼저 뜨고 그 사본에서 요소를 삭제한 후 setScoreItem을 다시 호출한다. 리액트는 set~ 함수로 상태를 바꿔야 랜더링이 발생한다. 사본을 뜰 때 const temp = scoreItem로 대입하면 안된다. 이 두 코드의 차이를 모른다면 자바스크립트 공부를 더 해야 한다.

초기화는 아주 쉬워서 빈 배열을 던져 주면 입력해 놓은 모든 정보가 날라간다. 정말 지울건지 질문 메시지 박스 정도는 보여 주는 것이 바람직하다. 잘못 입력한 건 삭제 후 다시 입력하면 된다. 편집 기능도 넣을 수 있지만 추가 모드와는 구분되는 편집 모드를 따로 두어야 한다는 면에서 다소 번거롭다.

정렬

성적표라면 당연히 석차를 내는 기능이 필요하다. 석차 버튼을 추가하고 이벤트 핸들러에서 임시 배열에 사본을 뜬 후 총점을 기준으로 내림차순 정렬한다. sort의 비교 함수에서 두 학생의 성적을 받아 뺀 결과를 리턴하면 그 부호에 따라 배열을 재정렬한다.

다른 멤버를 기준으로 정렬하려면 total이 아닌 원하는 멤버로 비교한다. 예를 들어 영어 성적만으로 비교하거나 이름순으로 정렬할 수도 있다. 상태가 바뀌므로 문단에 모든 성적이 정렬된 순서대로 재출력된다.

function sortScoreItem(e) {

const temp = [...scoreItem]

temp.sort((left, right) => right.total - left.total)

setScoreItem(temp);

}

기본적인 입력과 출력 기능은 완료했는데 디자인이 너무 사무적이고 썰렁하다. CSS로 스타일을 입혀 보자. 성적의 줄간을 200%로 지정하고 총점은 굵게 표시했다. 스타일은 인라인으로 작성할 수도 있지만 리액트는 App.css에 스타일을 지정하도록 되어 있다. 이 파일 끝에 두 개의 스타일을 추가한다.

.student {

line-height:200%;

}

.total {

font-weight:bold

}

이 스타일을 적용할 곳에 className을 지정한다. 학생은 목록이므로 li에 클래스를 지정하고 총점은 그냥 문자열이므로 <span> 태그로 감싸 클래스를 지정한다.

{s.student} 학생 : 영어 {s.score[0]}점 수학 {s.score[1]}점

총점 : <span className="total">{s.total}</span> 평균 : { s.avg.toFixed(2)}

</li>

디자인은 기술의 영역이 아닌 예술의 영역이다 보니 스타일을 줘도 모양이 그리 예쁘지는 않다. 역시 디자인은 전문가가 해야 한다.