버튼을 만들고 클릭을 할 때마다 변수에 1씩 더해주는 함수를 만들고 로그를 출력해 보도록 하겠습니다. ‘좋아하는 색’ 하단에 버튼을 만들어주고, 버튼에 클릭 이벤트를 넣도록 하겠습니다.
이전 챕터에서 여러 개의 단어가 결합되어 있으면 대문자로 구분했던 것 기억하시나요? html에서는 <button onclick="함수이름">으로 선언하던 것과 달리 리액트에서는 <button onClick={함수}>로 선언합니다.
function Resume(props) {
let like = 0;
function clickLike() {
like += 1;
console.log(like);
}
const myColor = props.color;
const styleColor = {color:myColor};
return(
<div style={{border:"solid 1px", width:"500px"}}>
<h1>{props.name} 자기소개서</h1>
<h1>{props.hello}</h1>
<h2>취미 : {props.hobby}</h2>
<h2>좋아하는 음식 : {props.food}</h2>
<h2>좋아하는 색 : <span style={styleColor}>{myColor}</span></h2>
<button onClick={clickLike}>like <span>{like}</span></button>
</div>
)
}
export default Resume;
like 버튼을 누를 때마다 만들어둔 변수가 변하는 것을 개발자 도구를 켜보시면 보실 수 있습니다. 하지만 like의 숫자는 변하지 않는 것을 알 수 있습니다.
<aside>
💡 여기서 onClick처럼 react에서 다루는 모든 이벤트는 아래 리액트 메뉴얼을 참고해 주세요.
</aside>
변수의 값이 바뀌어도 페이지는 랜더링하지 않기 때문인데요. 모든 변수가 변할때마다 컴포넌트를 업데이트 한다면 많은 리소스가 낭비될 것입니다. 그래서 특정 변수를 지정하여 그 변수가 변할 때마다 컴포넌트를 업데이트하라는 명령을 내려주어야 합니다.
<aside> 💡 앞서 살펴본 것처럼 React의 elements 즉, 가상돔은 자바스크립트 객체 형태입니다. 이 elements는 불변하는(immutable)특징을 가지고 있습니다. 따라서 엄밀하게 따진다면 업데이트되는 것은 컴포넌트이고 가상돔은 교체된다고 표현하는 것이 맞습니다.
컴포넌트의 변화를 감지하고 변경사항을 화면에 반영하는 것은 많은 자원이 소모되는 작업입니다. 때문에 리액트는 컴포넌트를 업데이트 해야할 때를 결정하는 특별한 메커니즘을 가지고 있습니다.
이를 ‘재조정**(reconciliation)’**을 거친다고 표현합니다. ****
</aside>
<aside> 🧐 재조정(reconciliation) reconciliation은 ****양자를 서로 비교 대조해서 차이를 없애고 같은 값이 되도록 하는 과정을 의미하는 회 계 용어입니다. 혹은 종교에서의 고해성사를 의미하기도 합니다.
React의 재조정은 Virtual DOM을 사용하여 React 컴포넌트 트리를 비교하고 최적화하는 프로세스입니다. React는 컴포넌트가 업데이트될 때 마다 Virtual DOM을 사용하여 이전 버전의 컴포넌트 트리와 새 버전의 컴포넌트 트리를 비교합니다.
reconciliation 프로세스는 이전 버전의 컴포넌트 트리와 새 버전의 컴포넌트 트리를 비교하여 다음과 같은 작업을 수행합니다.
이러한 비교 작업을 통해 React는 변경된 부분만 업데이트하고, 나머지 부분은 그대로 유지합니다. 이렇게 하면 React는 DOM 조작을 최소화하고 더 빠르고 효율적인 애플리케이션을 만들 수 있습니다.
정리하자면, reconciliation 프로세스를 통해 React는 컴포넌트를 업데이트하여 즉각적으로 반응하는 사용자 인터페이스를 만들 수 있습니다. 이것이 바로 React가 다른 프론트엔드 라이브러리와 차별화되는 중요한 기능 중 하나입니다. 참고 : https://ko.legacy.reactjs.org/docs/reconciliation.html
</aside>
변수의 값이 변경될 때마다 페이지를 업데이트 하도록 만들어주는 것이 useState입니다.
import React, { useState } from 'react';
function Resume(props) {
const [like, setLike] = useState(0);
// console.log(useState(0));
const myColor = props.color;
const styleColor = {color:myColor};
return(
<div style={{border:"solid 1px", width:"500px"}}>
<h1>{props.name} 자기소개서</h1>
<h1>{props.hello}</h1>
<h2>취미 : {props.hobby}</h2>
<h2>좋아하는 음식 : {props.food}</h2>
<h2>좋아하는 색 : <span style={styleColor}>{myColor}</span></h2>
<button onClick={clickLike}>like <span>{like}</span></button>
</div>
);
}
export default Resume;