React 활용 - 3 : useState, input 사용하여 데이터 입력하기

이번에는 react 의 useState를 input 과 함께 활용하여 데이터 입력을 해보도록 하겠다. 우선 작업 페이지 TextData.js 를 아래와 같이 생성 후 메뉴에 추가한다. import React from 'react'; function TextData() { return ( TextData data1: data2: Send ); } export default TextData; 이제 TextData.js 에서 data1, data2 두개의 데이터를 받을 state를 useState로 선언한다. import React, { useState } from 'react'; function TextData() { const [data1, setData1] = useState(''); const [dat..

2022.09.30

React - hook (useState, useEffect)

리액트에는 Hook 이라는 개념이 있다. 그 중 대표적이며 필수적인 것이 useState, useEffect이다 먼저 useState 에 대한 이해가 전제가 되어야 리액트 진행이 가능하다. 리액트는 state, 즉 상태라는 개념이 있는데 이 state가 변경이 되면 페이지의 리로딩 없이 그 변경되는 부분만 렌더링 한다. 이번 전체 코드는 아래와 같다. import React, { useState, useEffect } from 'react'; function Test1() { const [id, setId] = useState(0); function stateTest() { setId(id+1) } useEffect( () => { alert("ok") }, [] ); } return ( test{id}..

2021.05.03