일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- PINTOS
- sw 정글
- SW정글
- JavaScrpit
- onChange
- 자바스크립트 문자열 변수
- sw정글사관학교
- 회원가입 폼
- 프로그래머스
- 자바스크립트
- malloc-lab
- python
- 목록 창 만들기
- HTML
- Coding Test
- 사용자 정의 객체
- 정글sw
- 코딩테스트
- 템플릿 문자열
- Express
- 백준
- Spring
- React
- conding test
- javascript
- node.js
- 리액트
- html input
- 회원가입
- dfsbfs
- Today
- Total
목록onChange (2)
코드치고 무게치고
https://wonyoung2257.tistory.com/4 [[React] input onChange 사용법 (onChange)사용 예시 이 글은 class로 작성하였는데 Hook을 사용하여 input을 받는 것으로 리뉴얼하겠다. 1. Example2.js import { useState } from "react"; const Example2 = () => { const [text, setText] = useState("텍스트"); const changeHandler = (e) => { setText(e.target.value); }; return ( {text} ); }; export default Example2; 함수형 컴포넌트에는 state를 useState라는 hooks를 사용하여 제어한다...
class로 작성되어 있던 내용을 hooks로 다시 적어보았다. hooks로 간단하게 input onChange를 사용하는 예시는 아래의 글을 참조하기 바란다. https://wonyoung2257.tistory.com/32 1. 기본 UI 준비 Example2.js import React from "react"; export default class Example2 extends React.Component { state = { text: "텍스트", }; render() { return ( {this.state.text} ); } } Example2 컴포넌트를 위와 같이 작성해줍니다. App.js import React from "react"; import Example2 from "./Example..