mindol1004/excel-download
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

react : useState

Browse Source
This commit is contained in:
kim
2021-02-03 15:46:01 +09:00
parent 83d394fecc
commit 32d061a3eb
2 changed files with 17 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
react-springboot/my-app/.eslintcache
View File

@@ -1 +1 @@
[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js":"4"},{"size":500,"mtime":499162500000,"results":"5","hashOfConfig":"6"},{"size":362,"mtime":1612328420362,"results":"7","hashOfConfig":"6"},{"size":1077,"mtime":1612333105209,"results":"8","hashOfConfig":"6"},{"size":162,"mtime":1612333128212,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"11g3wnd",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["19","20"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],{"ruleId":"21","replacedBy":"22"},{"ruleId":"23","replacedBy":"24"},"no-native-reassign",["25"],"no-negated-in-lhs",["26"],"no-global-assign","no-unsafe-negation"] [{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js":"4"},{"size":500,"mtime":499162500000,"results":"5","hashOfConfig":"6"},{"size":362,"mtime":1612328420362,"results":"7","hashOfConfig":"6"},{"size":692,"mtime":1612334714924,"results":"8","hashOfConfig":"6"},{"size":162,"mtime":1612333128212,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"11g3wnd",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["19","20"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],{"ruleId":"21","replacedBy":"22"},{"ruleId":"23","replacedBy":"24"},"no-native-reassign",["25"],"no-negated-in-lhs",["26"],"no-global-assign","no-unsafe-negation"]

51
react-springboot/my-app/src/App.js vendored
View File

@@ -1,51 +1,32 @@
import { useState } from 'react'; import { useState } from 'react';
import './App.css'; import './App.css';
import Sub from './Sub';
let a = 10;
const b = 20;
function App() { function App() {
const mystyle = { let sample = [
color: 'red', { id: 1, name: '홍길동' },
}; { id: 2, name: '임꺽정' },
{ id: 3, name: '장보고' },
let list = [1, 2, 3]; { id: 4, name: '세종대왕' },
const users = [
{ id: 1, name: 'kim', phone: '1234' },
{ id: 2, name: 'lee', phone: '1234' },
{ id: 3, name: 'choi', phone: '1234' },
]; ];
const update = { const [users, setUsers] = useState(sample);
id: 2, const [num, setNum] = useState(5);
name: 'park',
};
const newUser = users.map((u) =>
u.id === update.id ? { ...u, ...update } : u,
);
console.log(newUser);
const [number, setNumber] = useState(1); const download = () => {
const add = () => { setUsers([...sample, { id: num, name: '조자룡' }]);
setNumber(number + 1); setNum(num + 1);
console.log('add', number);
}; };
console.log('rendering');
return ( return (
<> <>
<div style={mystyle}>안녕{a === 10 ? '10입니다.' : '10이 아닙니다'}</div>
<h1 className="box-style">제목{b === 20 && '20입니다.'}</h1>
<div> <div>
{list.map((n) => ( {users.map((u) => (
<h1 key={n}>n</h1> <h1>
{u.id}, {u.name}
</h1>
))} ))}
</div> </div>
<div> <button onClick={download}>다운로드</button>
<h1>숫자 : {number} </h1>
<button onClick={add}>더하기</button>
</div>
<Sub />
</> </>
); );
} }