$$config title: [리액트] 숫자리스트 keywords: - map $$ # [리액트] [입력상자 구현하는 방법](https://codepen.io/SeonHo-/pen/RwQZVWd?editors=1010) ## 1 . state 활용하여 입려받을 숫자의 변수 생성 ```js const [no, setNo] = useState(0); ``` ## 2 . input 안에 입력받을 값의 타입, 값, 재실행 관련 코드 입력 ```js return ( <> setNo(e.target.valueAsNumber)} />

no : {no}

); ``` -

: 줄바꿈 # [리액트] [취소버튼 구현 방법](https://codepen.io/SeonHo-/pen/jOZLmWr?editors=0010) ```js return ( <> setNo(e.target.valueAsNumber)} />

no : {no}

); ``` - input 뒤에 button 버튼을 만들어 준다. - => 띄어쓰기 기능 - 위의 취소 기능 : 취소 버튼을 누르면 0으로 초기화 된다. # [리액트] [저장버튼 구현 방법](https://codepen.io/SeonHo-/pen/ExQvmyQ?editors=0010) ```js function App() { const [no, setNo] = useState(0); const save = () => { setNo(0); }; return ( <> setNo(e.target.valueAsNumber)} />

no : {no}

); } ``` - 위의 취소 버튼 구현방법에서 바로 0으로 초기화를 했던것을 함수를 이용하여 초기화할 수 도 있다. # [리액트] [저장버튼에 의한 배열변경 방법](https://codepen.io/SeonHo-/pen/eYVEWgG?editors=0010) ```js function App() { const [no, setNo] = useState(0); const [nos, setNos] = useState([]); const save = () => { setNo(0); setNos([10, 20, 30]); }; return ( <> setNo(e.target.valueAsNumber)} />

no : {no}

nos : {JSON.stringify(nos)}

); } ``` - 배열을 저장하기 위한 state를 추가한다. - 추가한 stsate를 save 함수 안에 넣는다. => setNos([~]); - setNos([]);로 입력을 하면 출력하는 문장에서 특별한 코드를 써주어야함 " {JSON.stringify(nos)}" => 해당 객체를 문장형식으로 잘 보여달라는 뜻 # [리액트] [저장시 숫자 추가 방법](https://codepen.io/SeonHo-/pen/BaYdRZN?editors=0010) ```js function App() { const [no, setNo] = useState(0); const [nos, setNos] = useState([]); const save = () => { setNo(0); setNos([...nos, no]); }; return(~~); ``` - 배열을 저장하는 방법을 사용하려면 예시에 나와있는 방법을 활용하여 save에 있는 setNos(); 안에 있는 값을 [...nos, no]으로 변경해야한다. * 예시 [왼쪽에 있는것과 오른쪽에 있는 것은 같은것이다.] ```js const a = [10,20]; const b =[a[0], a[1], 30];``` ||| ```js const a = [10,20]; const b =[...a, 30];``` # [리액트] [저장시 리스트 리랜더링 방법](https://codepen.io/SeonHo-/pen/wvyqdpG?editors=0010) ```js setNo(e.target.valueAsNumber)} />

no : {no}

nos : {JSON.stringify(nos)}

{no}

``` - map과 ui(목록) / li(항목)의 특징을 활용하여 함수를 만든다. => ```js

{no}

``` - 이와 같이 맵을 통해서 엘리먼트를 많이 만들 경우에는 no만 작성하는것이 아닌 index도 같이 작성 / 항목에는 kye ={index}하는 것도 잊으면 안됨! [외울것!!] ```js

{no}

```