반응형
React state안에 state 넣기
*State 구조
- input 이라는 오브젝트형 state를
- objectives 라는 배열형 state에 넣는 구조
예시)
objectives = [
{"objectiveName":"테스트","objectiveDate":"2022-12-20T15:00:00.000Z","challengeList":"공란","id":1},
{"objectiveName":"해물파전","objectiveDate":"2022-12-19T15:00:00.000Z","challengeList":"dzfwafeq","id":2}
]
const [input, setInput] = useState({ //input 입력 값 상태 -> 오브젝트형
objectiveName: '',
objectiveDate: '',
challengeList: ''
});
const [objectives, setObjectives] = useState([]);
const onSubmit = (e) => {
//'input' state를 objectives안에 넣는 (문법1)
setObjectives([
...objectives,
input
]);
//'input' state를 objectives안에 넣는 (문법2)
setObjectives((currentState) => [...currentState, input]);
//setObjectives에 함수를 보낸다. => 함수를 보낼때 첫번째 인자는 현재state다!
//따라서 currentState 인자는 현재 상태를 뜻한다. (이름은 아무거나 바꿔도 상관없음)
}
반응형
'공부 > React & Next.js' 카테고리의 다른 글
[React] 깃허브 페이지(gh-pages)에 배포 하기 (1) | 2022.12.11 |
---|---|
★★ React Hooks 정리잘 된 링크 (useEffect, useRef) ★★ (0) | 2022.12.08 |
[React] [리액트 에러 해결] Uncaught Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead. (0) | 2022.11.28 |
[React] React 버튼 클릭 시 스크롤 이동 예제(useRef) (0) | 2022.11.26 |
CSS Grid, Flex (0) | 2022.11.21 |