React - input 상태 관리법 input 상태 관리 리액트에서는 input의 값을 사용하기 위해 state를 지정하고 변경 또한 이 state 값을 변경해서 사용해야 합니다. 위와 같은 기능을 하는 input 상태 관리 코드입니다. import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } input의 value가 변할 때마다 onChange 이벤트를 통해 ..
React - 동적인 값 관리 useState useState란? 리액트를 통해 인터랙티프한 페이지 작성을 위해서는 useState라는 리액트 Hooks 중 하나를 사용하는 것이 효율적입니다 import React, { useState } from 'react'; 코드 에디터에 따라 다르지만 자동 입력되거나 직접 디스트럭팅하여 import 합니다. useState 사용법 함수형으로 업데이트하는 방식은 아래와 같습니다. 이해를 돕기 위해 수 증감 기능을 작성했습니다. import React, { useState } from 'react'; const PlusMinus = () => { const [num, setNum] = useState(0); const plus = () => { setNum(previ..
React - 리액트란, 작동 원리, 개발 환경 구축 리액트란 UI 자바스크립트 라이브러리로 싱글 페이지 애플리케이션이나 모바일 애플리케이션 제작하기 위해 만들어졌고 페이스북(메타)에서 개발하였다. 리액트는 왜 만들어졌을까? 자바스크립트를 통해 HTML의 DOM을 변화시키기 위해 번거로운 작업이 필요했다. 개인적으로 만들었던 수량 증감 버튼을 활용하여 설명하자면 const minusBtn = document.getElementById('quantity-minus'); const plusBtn = document.getElementById('quantity-plus'); const quantity = document.getElementById('quantity-value'); //수량 플러스, 마이너스 버..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
