#98. React 요소삭제 및 Route

 

1. 요소 삭제하기

App.js

import logo from './logo.svg';
import './App.css';
import Chap01 from './component/page/Chap01';
import Chap02 from './component/page/Chap02';
import IdolInfo from './component/idol/idolInfo';
import Chap03 from './component/page/Chap03';
import { Route, Routes } from 'react-router-dom';

function App() {

  const idolList = [{id : 1, name : 'ENHYPEN',
                     image : 'https://i.namu.wiki/i/jXfnSAvaPK-WNM0cHaCqDeIkAmrddyVQuSM0mBNHDVxbeSnzvzCn2uqDil3yhI1UzqZEruEjzmFFKH2pcMcOuXMeM_WlgGeLuTGNii72N7VLxaEaIW-Ui3sO8IdOQPyk4xHIvieLjRQUjMlgfU7vbA.webp',
                     member : 7,
                     song : '몰랐어'},
                    {id : 2, name : 'LE SSERAFIM',
                     image : 'https://i.namu.wiki/i/LoxpZ21-IgOoIV3iTbI3XVrunh6Ndn_9aF7l19Zfcr-sM_70tlX24WrHM9lbVJzJe6LutJLOrwlcSlvlfzMuWMYiG4-wMKH8w9RStOvfkz0fhfIgv3YBXbhkpRTwgVT44DS8Cpevi8ws2uBrbRNHNA.webp',
                     member : 5,
                     song : 'FEARLESS (Japanese ver.)'},
                    {id : 3, name : '량현량하',
                     image : 'https://i.namu.wiki/i/zFsCBM-LdnXJUXiYcgcgx-gmBXzsmivwgESDV6alivHHSjU9-vbV6SLms2GOkfnZrbOiADGLHZwum0PKRdM-yvaAtf_9uxkmpWrBV-KgZev5aayHgFnTjkrMjz0HWTRKYkBWjqf19dcpvDex0YyHZA.webp',
                     member : 2,
                     song : '학교를 안갔어'}];


  return (
    <div className="App">
      {
       // <Chap02 />
       // <Chap01 />
       // <Chap01 />
       // <Chap02 />
       // <Chap03 />
     
      }
 	<IdolInfo idolList={idolList}/>


    </div>
  );
}

export default App;

 

 

idolInfo.jsx

import { useState } from "react";
import IdolDetail from "./idolDetail";
import IdolMain from "./idolMain";


const IdolInfo = props => {

    /*
    console.log(props);
    console.log(props.idolList[0]);
    const [idol1, idol2, idol3] = props.idolList;
    */

    // const idolList = props.idolList;
    // console.log(idolList);

    /*
    const idol1 = props.idolList[0];
    const idol2 = props.idolList[1];
    const idol3 = props.idolList[2];
    */

    const [idolList, setIdolList] = useState(props.idolList);

    const [nameValue, setNameValue] = useState('');
    const [memberValue, setMemberValue] = useState('');
    const [songValue, setSongValue] = useState('');
    const [imageValue, setImageValue] = useState('');
    // 초기값은 반드시 넣어준다 => 숫자는 0, 문자열은 '', 배열은 []
    // 안넣으면 undefined

    const inputName = e => {
        // console.log('진짜임?');
        setNameValue(e.target.value);
    }
    const inputMember = e => {
        setMemberValue(e.target.value);
    }
    const inputSong = e => {
        setSongValue(e.target.value);
    }
    const inputImage = e => {
        setImageValue(e.target.value);
    }

    const addIdol = () => {

        // 빈문자열이면 Falsy한 값 => 조건으로 사용
        if(nameValue && memberValue && songValue && imageValue){

            const ids = idolList.map(i => i.id); 

            console.log(Math.max(...ids)); // ...은 스프레드문법 => 배열안의 요소들을 쫙 펼쳐줌

            const idol = {
                id : Math.max(...ids) + 1,
                name : nameValue,
                member : memberValue,
                song : songValue,
                image : imageValue
            }
            console.log(idol);
            // idolList.push(idol); => 스페이스라도 눌러야 뜸
            let copyArr = [...idolList, idol];
            console.log(copyArr);
            setIdolList(copyArr);
            setNameValue('');
            setMemberValue('');
            setSongValue('');
            setImageValue('');



        }
        else{
            alert('모든 항목을 입력해 주세요!!');
        }
    }

    return ( 
        <>
            <IdolMain />

            {
                /*
                    <IdolDetail idol={idol1} />
                    <IdolDetail idol={idol2} />
                    <IdolDetail idol={idol3} />
                */
                    // for문ㄴㄴ
                    idolList.map((idol, index) => {
                        // console.log(idol);
                        // console.log(index);
                        // key는 안넘겨주면 오류가 뜨기 때문에 index로 넘겨줌
                        return (
                            <IdolDetail idol={idol} key={index} setList={setIdolList} list={idolList} />
                        )
                    })
            }
            
            <br/>

            <div id="enroll-form">
                <div>
                    <h3>그룹명</h3>
                    <textarea onChange={inputName}></textarea>
                </div>
                <div>
                    <h3>인원수</h3>
                    <textarea onChange={inputMember}></textarea>
                </div>
                <div>
                    <h3>대표곡</h3>
                    <textarea onChange={inputSong}></textarea>
                </div>
                <div>
                    <h3>사진주소</h3>
                    <textarea onChange={inputImage}></textarea>
                </div>
                <div>
                    <button >삭제하기</button>
                </div>
            </div>

            <button onClick={addIdol}>아이돌을 추가하자</button>

            <br/><br/><br/><br/><br/>


            
        </>
    );




}

export default IdolInfo;

 

 

idolDetail.jsx

const IdolDetail = props => {

    // console.log(props);
    const idol = props.idol;
    const setList = props.setList;
    const list = props.list;

    function deleteIdol(e){
        if(list.length != 1){
            const newIdolList = list.filter(idol => { return idol.id != e.target.id });
            //console.log(newIdolList);
            setList(newIdolList);
        }
    };

    return(

        <div className="info">
            <div>
                <img src={idol.image} alt="아이돌사진" />
            </div>
            <div>
                <p>그룹명</p>
                <p>{idol.name}</p>
            </div>
            <div>
                <p>인원</p>
                <p>{idol.member}</p>
            </div>
            <div>
                <p>대표곡</p>
                <p>{idol.song}</p>
            </div>
            <div>
                <button onClick={deleteIdol} id={idol.id}>삭제하기</button>

            </div>
        </div>


    )


}

export default IdolDetail;

 

 

 

2.

터미널 >

npm install 설치할 

npm install react-router-dom@6

 

 

indelx.js

 

 

App.js

 

 

 

 

css관련

- 부트스트랩

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

npm install react-bootstrap bootstrap

npm install styled-components@latest

 

 

백틱 ``