전체 글157 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. useState를 통해 컴포넌트에서 바뀌는 값 관리하기, 화살표함수 import React, { useState } from 'react'; function Counter(){ const [number, setNumber] = useState(0); // 비구조화 할당을 통해 number라는 상태를 만들텐데 상태를 파라미터값: 0으로 하겠다, setnumber는 상태를 바꿔주겠다 const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(number - 1); } return( {number} +1 +1 ) } export default Counter; 1) import 부분에 useState 구문 추가 const [ number, setN.. 2020. 7. 19. 이전 1 ··· 35 36 37 38 39 40 다음