Language/React25 useRef로 특정 DOM 선택하기 / useState, useRef JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 함수형 컴포넌트에서 ref를 사용할 때는 useRef 라는 Hook 함수를 사용한다. useState, useRef의 공통점 useState와 useRef의 기능상의 공통점은 함수형 컴포넌트에서 동적으로 상태 관리를 할 수 있게 해준다는 점입니다. 간단한 예시로, 버튼이 클릭 되었을때 주어진 state를 “Humanscape!” 라는 string으로 변환하는 동일한 프로그램을 useState와 useRef를 통해 아래와 같이 다르게 구현할 수 있습니다. useState.jsx import React, .. 2020. 7. 29. webpack 설정하기 해당 폴더 만들기 npm init으로 설정하기 npm i react react-dom npm i -D webpack webpack-cli npm i babel-loader npm i @babel/core npm i -D @babel/preset-env npm i -D @babel/preset-react 을 콘솔창에 입력해준다음 webpack.config.js를 파일명으로 파일을 만들어준다. webpack.config.js webpack.config.js 들어갈 설정에는 위와같이 해주면 된다. const path = require('path'); module.exports = { mode: 'development', devtool: 'eval', // hidden-source-map resolve: { e.. 2020. 7. 26. 여러개의 input 상태 관리하기 import React, { useState } from 'react'; function InputSample(){ //여러개의 객체를 관리해줘야 한다. const [inputs, setInputs] = useState({ name:'', nickname:'', }); const { name, nickname } = inputs; //비구조화할당을 통해 추출 const onChange = (e) => { const { name, value } = e.target; setInputs({ //객체를 업데이트할 때는 기존 객체를 복사해야한다. ...inputs, //spread 연산자 [name]: value, // 실제 []안에 무엇을 가르키고있는지에 따라 다른 key값이 변경된다 }); } const on.. 2020. 7. 19. Input 상태 관리하기 import React, { useState } from 'react'; function InputSample(){ const [text, setText] = useState(''); const onChange = (e) => { // 이벤트 객체가 의미하는 것은 만약 이벤트가 수정이 발생했을 때 e 파라미터로 받는다 setText(e.target.value); // target이 의미하는것은 e(이벤트)가 발생한 DOM의 정보를 가지고 있다. } const onReset = () => { setText(''); } return( 초기화 값: {text} ); } export default InputSample; input에 onChange라는 속성을 추가한 다음에, onChange라는 함수를 연결한다 .. 2020. 7. 19. 이전 1 2 3 4 5 6 7 다음