[ React ] To Do List 만들기 - 02

 

 

 

 

 

 

 

# 모달 창의 [ + New Task ] 버튼 클릭 시, <Contents>로 입력 값 넘어가서 화면에 뜨기

 

[1]_ [ + New Task ]  버튼 클릭 시 모달 창 pop up 

 

const [showPopup, setShowpopup] = useState(falsE);
const [newListcontent, setNewListcontent] = useState('');
const [lists, setLists] = useState([{
	id:1, 
    content: '첫번 째 할 일', 
    date: '2022-03-31',
}];


const togglePopup = () => {
	setShowpopup(!showPopup);
}


const onTextChange = (e) => {
	setNewListcontent(e.target.value);
}

const openClicksubmit = () => {
	togglePopup();
}

const closeClicksubmit = () => {
	const newlist = {
    	id: lists.length + 1,]
        content: newListcontent,
        date: new Date().toLocaleDateString('ko-kr'),
    }	
    
    setLists([...lists, newlist]);
    newLListcontent='';
    togglePopup();
}

 

 

[2]_ [ Add List ]  버튼 클릭 시 모달 창 ! popup

 

∵ 삼항 연산자를 사용해서 showPopup 함수가 실행되면 모달 창이 나타나고, 다시 누르면 모달창이 꺼지게 구현. 

//return 일부 생략 
// 모달 창 부분 
<div className="under___btn">
	<button className="open" conClick={openClicksubmit}>+ New Task</button>
       {showPopup ? (
    	<div className="popup">
        	<div className="popup_inner">
         		<h2>To Do List</h2>
                <div className="popup_inputs">
                	<div className="input_date">{{parseDate}</div>
                    <textarea className="text_list" 
                    placeholder='write what will you do'
                    value={newListcontent}
                    onChange={onTextChange}>
                    </textarea>
                    <button className="add_list close" 
                    onClick={closeClicksubmit}>Add List
                    </button>
                </div>
            </div>
         </div>
        </div>
        ) : null }
</div>

 

 

 

 

# <기능구현 실패>  : [Add List] 버튼 눌렀을 때, 첫 번째 입력에는 기본  list 값이 출력되고, 두번 째 입력 때 id:1 순으로 lists 에 새로운 값이 추가되어버린다. 

 

 

console.log(l ists );

 

 

[1]_처음 입력 시, 입력된 값은 무시되고 초기값이 lists 에 할당 되었음을 알 수 있다. 

 

 

[2]_한 번 더 값을 입력 해주어야 id:1로 lists 에 추가 된 것을 확인 할 수 있다. 

 

 

 

 

 

# < Advanced >  : 입력 후 입력값 부분 초기화 필요.