[React] 리스트에 내용 추가하기.

이전글

 

:: [React] useState, onChange를 활용하여 input값 변화시키기! input 상태관리

https://june6.tistory.com/33

:: [React] Input - submit - form 구현하기 [리로딩 방지 외]

https://june6.tistory.com/36 

목표

useState를 사용하여 간단하게 리스트에 내용을 추가한다.

---

일단 이전에 작성했던 코드를 가져와보았다.

//InputForm.js

import React, { useState } from 'react'

const InputForm = ()=>{
    const [text, setText] = useState('')
    
    const onChange =(e)=>{
        setText(e.target.value);
    }

    const onSubmit =(e)=>{
        e.preventDefault();
        alert(`이름: ${text}`);
    }

    return(
        <form onSubmit={onSubmit}>
            <label>
                이름 : {text}
                <br />
                <input type="text" name="name" value={text} onChange={onChange}/>
            </label>
            <button type="submit">작성</button>
        </form>
    )   
}

export default InputForm;

 

내가 이어서 구현하고 싶었던 것은 이름을 입력했을 때 아래 목록에 이름이 추가되는 것이다.

일단 리스트를 저장시킬 useState를 하나 선언해준다.

const [list, setList] = useState([]);

list는 배열로 들어가기 때문에 useState([ ]) 형식으로 작성하였다.

setList 는 내가 Name을 입력하였을 때 저장될 장소이다.

 

input에 입력하고 <버튼>을 눌렀을 때 작동해야하는 것이기 때문에 이번에 사용할 함수는 <button> 태그 속성에 들어갈 예정이다.

 const onClickButton = (e)=>{
        setList([...list,text])
    }

onChange 처럼 onClickButton 함수를 만들어주고

...list 의 ...은 새로 추가 될 배열을 프로퍼티들을 새로운 object에 복사한 후 덮어씌우는 역할을 해준다.

 

<button type="submit" value="등록" onClick={onClickButton}>작성</button>

<ul>
   {list.map((item, idx)=><li key={idx}>{item}</li>)}
</ul>

그리고 버튼 onClick 속성에 만들어 둔 onClickButton 함수를 넣어준다.

 

그리고 이제 이 배열을 풀어주려면 위에처럼 .map 함수를 사용하여야 한다.

.map 에 관련된 내용은 https://june6.tistory.com/12 에 작성해놓았다.

 

아주 잘 추가된다.