Hooks

컴포넌트 안에 메서드를 만들어서 간단한 이벤트를 처리해보자! 위와 같은 화면이 있고 요구사항으로는 1. 입력 버튼에 마우스가 올라가면 색이 변해야 한다. 2. 마우스가 버튼에서 나가면 색은 다시 돌아와야 한다. 3. 이름을 입력하고 버튼을 누르면 "안녕하세요"가 "감사합니다"로 변해야 한다. 우선 1, 2번을 해결해보자! import React, { useState } from "react"; function App() { const [isMousedOver, setMouseOver] = useState(false); function handleMouseOver() { setMouseOver(true); } function handleMouseOut() { setMouseOver(false); } ret..

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( 0 + , document.getElementById("root") ); 오른쪽과 같은 UI가 있다. + 버튼을 누를 때마다 숫자가 하나씩 올라가게 만들어 보자! 왼쪽과 같은 html 코드로는 이 기능을 만들 수 없다. 증가되야하는 숫자를 변수로 만들고 +버튼이 눌릴 때마다 숫자를 올려주는 메서드를 만들면 될 거 같다! import React from "react"; import ReactDOM from "react-dom"; var count = 0; function increase() { count++; console.log("클릭!"); } ReactDOM.re..