멋사 FE 5주차. 과제 REACT 컴포넌트 사용

1) 다른 컴포넌트에 props 전달하기

<AddList inputtodos={inputtodos} inputtodo={inputtodo} index ={index}/>

import React, {useState, useRef} from 'react';
import '../assets/scss/style.scss'
import plus from '../assets/img/plus.svg'
import exit from '../assets/img/exit.svg'
import PropTypes from "prop-types";
import $ from 'jquery';
const AddList = ({inputtodos,inputtodo, index,})=>{
    const i =index;
    const listid = `list${i}`
    return(
        <div id={listid} class="list">
                <div  class="box">
                    <input type="checkbox"/>
                    <label for="checkboxSample"></label>
                    <p>{inputtodo}</p>
                </div>
                <button class="deletebtn" onClick={()=>{
                    $(`#list${i}`).remove();
                }}><img src={exit} alt="exitbtn"/></button>
        </div>
    )
}
AddList.propTypes = {
    inputtodo: PropTypes.string,
  };
export default AddList

2) map함수와 배열

map함수를 이용하면 요소를 배열로 저장해서 한번에 render할 수 있습니다. 저는 컴포넌트를 map으로 저장해서 한번에 render했습니다.

import React, {useState, useRef} from 'react';
import '../assets/scss/style.scss'
import plus from '../assets/img/plus.svg'
import exit from '../assets/img/exit.svg'
import AddList from './AddList';

const ToDoList = () => {
    const [inputtodo,setInputToDo]=useState(''); //input의 text 받음
    const [inputtodos,setInputToDos]=useState([]); // 배열로 저장해서 map으로 한번에 render
    const [addbtn,setAddBtn]=useState(false);
    
    let index = 0;
    return (
        <div id="wrap">
            <header id="header">
                <h1>TO-DO-LIST</h1>
                <div class="add">
                    <input value={inputtodo} onChange={(e)=>{setInputToDo(e.target.value)}}  type="text"  placeholder="오늘 할 일을 입력해주세요." id="input_todo"/>
                    <button value={addbtn} onClick={()=>{if(inputtodo=='')alert("내용을 입력해주세요.")
                        else {setAddBtn(true);index++;
                            setInputToDos((currentArray) =>[inputtodo, ...currentArray]);
                        }
                    }} id="addbtn">
                        <img src={plus} alt="plusbtn"/>
                    </button>
                </div>
            </header>
            <main id="main">
                {inputtodos.map((inputtodo,index)=><AddList inputtodos={inputtodos} inputtodo={inputtodo} index ={index}/>)}
            </main>
        </div>
        
  )
}

export default ToDoList

 

3) react map함수로 감싸진 onclick

arrow function을 이용해 해결할 수 있습니다.

<button onClick={()=>{handleReplyDelete(reply)}}>Delete</button>

 

4) jquery를 이용해 요소 삭제하기

react에서 jquery  사용하기

For Windows

npm install jquery --save

Now in the JS files you can use jquery

import $ from 'jquery';

https://stackoverflow.com/questions/54235297/is-not-defined-no-undef-reactjs-ajaxcall

 

요소 삭제 jquery

$("p").remove("#one, #two");

https://www.devkuma.com/docs/jquery/%EC%9A%94%EC%86%8C%EC%9D%98-%EC%82%AD%EC%A0%9C-remove--detach--empty--unwrap-/

 

 

 

수정사항1) checkbox

수정사항2) 배열 안의 요소 삭제