#97. React 03 - State

onclick도 카멜기법 사용

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,
                memebr : 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} />
                        )
                    })
            }
            
            <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 onClick={addIdol}>아이돌을 추가하자</button>

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


            
        </>
    );




}

export default IdolInfo;