공부블로그

일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다. 이를 통해 css에서 특정 id에 스타일을 적용하거나, 자바스크립트에서 해당 id요소를 찾아 작업할 수 있다. 이와 비슷하게 리액트에서 DOM에 이름을 다는 방법이 바로 ref 이다. 우선 state를 사용한 예제를 작성해보자. App. js import React, { Component } from "react"; import ValidationSample from "./ValidationSample"; class App extends Component { render() { return ; } } export default App; ValidationSample. css .success { background-color: lightgre..

이벤트( Event ): 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것 예를 들어 HTML에서 DOM요소에 이벤트를 설정하는 방법을 살펴보자. //누르면 alert함수를 사용해서 executed문구의 메시지 박스를 띄움 Click me //이 문구의 버튼을 HTML에서는 이벤트를 실행하면 " " 사이에 있는 자바스크립트를 실행하도록 작성한다. 4. 1 ) 리액트의 이벤트 시스템 Say. js import React, { useState } from "react"; const Say = () => { const [message, setMessage] = useState(""); //useState의 인자에는 상태의 초기값을 넣어줌 const onClickEnter = () => setMessage..