React props.active 정리

£€€.T.$·2023년 6월 20일

Qna.js

 {qnaData && qnaData.map((q,index)=>
            <QnaInfo key={q.qnaId} active={qnaAccodian === q.qnaId}>
                <div className="qnaHead">
                    <div className="qnaId">
                        {q.qnaId}
                    </div>
                    <div className="itemId">
                        {q.product}
                    </div>
                    <div className="userId">
                        {q.user}
                    </div>
                    <div className="qnaNmList" onClick={()=>{onPopAccodian(q.qnaId)}}>
                        {q.qnaTitle}
                    </div>
                    <div className="answer" onChange={getValue}>
                        <select name ='qnaSelect'>
                            <option value="HOLD">hold</option>
                            <option value="COMPLETE">complete</option>                           
                        </select>
                    </div>
                    <div className="date">
                        20230620
                    </div>
                </div>
                <div className="parnetContents">
                    <div className="childContents">
                        {q.qnaContent}   
                    </div>                     
                     <div className="answerContents">
                        {q.reply}
                     </div>
                    <input type="text" placeholder="answer" value={qnaReply} onChange={(q) => onReply(q)}/>
                    <button onClick={()=>{onSubmitQna(q.qnaId)}}>submit</button>
                </div>
            </QnaInfo>
            )}

QnaInfo 는 div 태그의 style-components

key 값과 active 값을 설정하여 현재 선택 되어진 div를 지정 할 수 있다.

이는 선택한 부분의 div 만 css를 재정의 할 수 있다.

.parnetContents{
        width: 100%;
        height: 0px;
        overflow: hidden;
        transition: height 0.35s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        ${props => props.active && css`
          height: 200px;
        `}
    }

또는 컴포넌트에 넣어 현재 선택된 div안의 값만 랜더링 할 수 있다.

   //답변이 담길 상수
    const [qnaReply, setQnaReply] = useState();
    //input창에 쓰여지는 답변
    const onReply=(e)=>{
        //e.active 로 선택 된 값만 변경 되게 한다.
        setQnaReply(e.active && e.target.value)        
    }

20230621 문제 발생
CSS는 문제가 없으나 input value값이 undefind로 출력 되어 DB에 담기지 않게 되었다.

급하게 수정

Qna.js

{qnaData && qnaData.map((q,index)=>
    <QnaInfo key={q.qnaId} active={qnaAccodian === q.qnaId}>
          <div className="qnaHead">
             <div className="qnaId">
               {q.qnaId}
             </div>
             <div className="itemId">
               {q.product}
             </div>
             <div className="qnaNmList" onClick={()=>{onPopAccodian(q.qnaId)}}>
                {q.qnaTitle}
              </div>
                    <div className="answer" >
                        <select name ='qnaSelect'onChange={getValue}>
                            <option>{q.qnaStatus}</option>
                            <option value="HOLD">hold</option>
                            <option value="COMPLETE">complete</option>                         						
						</select>
                    </div>
                <div className="parnetContents">
                    <div className="childContents">
                        {q.qnaContent}   
                    </div>                     
                    <input type="text" placeholder="answer" onChange={getValue} name ='qnaReply'/>
                    <button onClick={()=>{onSubmitQna(q.qnaId)}}>submit</button>
                </div>
            </QnaInfo>
            )}

input에 name='qnaReply'를 설정하고 onChange를 getValue로 Select와 함께 묶어버렸다.

//답변과 답변 상태가 담길 상수
    const [qnaStatue, setQnaStatue] = useState();
    //답변 상태의 value가 담길 컴포넌트 select는 배열이므로 해당 배열 안의 값을 구해야 한다.
    const getValue = (e) => {
        const { value, name } = e.target;
        setQnaStatue({
            ...qnaStatue,
            //name 키를 가진 값을 value로 설정
            [name]: value
          })
       
    console.log(qnaStatue);
    // qnaSelect, qnaReply 각각 답이 담긴다. 
    }

묶여진 value들은 useState를 통해서 배열로 저장 되어질 예정

qnaStatue.qnaReply
qnaStatue.qnaSelect 값으로 저장 됨.


 const onSubmitQna =async(props)=>{      
        //HOLD,COMPLETE 둘 중 하나의 값이 나온다.  
        // console.log(qnaStatue.qnaSelect);   
        const response = AxiosFinal.qnaUploadReply(props,qnaStatue.qnaSelect,qnaStatue.qnaReply);
        console.log("qna 답변 통신 ",response)
    }
    return(

엑시오스로 DB에 잘 보내주자

2023-07-07 수정

props외에도 map을 돌려 선언한 element(?) 값을 통해서 해당 영역에서만 event를 실행 시킬 수 있다.

map으로 들어온 product data를 mouseOver시 해당 product의 이미지를 썸네일로 보여주기

onHover

onHover를 선언하여 마우스가 해당 상품에 올려져있는지를 확인한다.

   //호버상태를 체크한다.
    const [onHover,setOnHover] = useState();
    //마우스를 올리면 해당 상품 이미지가 나타남.
    const onPopUpImage=(props)=>{
        console.log(props);
        setOnHover(props);
    }
    //마우스 떼면 이미지가 사라짐
    const onPopUpImageFalse=()=>{
        console.log();
        setOnHover();
    }

onPopUpImage(props)

마우스를 올리면 해당 값의 productID를 props를 통해서 넘겨주며 이를 setOnHover에 담아준다.

onPopUpImageFalse

마우스가 해당 영역을 벗어나면 setOnHover를 비워준다.

 <div className="itemId" 
onMouseOver={()=>onPopUpImage(i.productId)} 
onMouseLeave={()=>onPopUpImageFalse()}>

onHover === [넘어온 값] &&

조건문과 동일한 형태다 onHover 이 i.productId값과 같다면 && 뒤의 className 이 실행되어진다.

style...

해당이미지의 좌표는 마우스를 따라가게된다.

   {onHover ===i.productId && 
     <img src={i.productImgFst} 
    className="popUpImage" 
    style={{left:xy.x,top:xy.y}}/>}

handleMouseMove

 //마우스 따라서 이미지가 움직임
    const [xy,setXY]=useState({x:0,y:0})
    const handleMouseMove=(e)=>{
        setXY({x:e.clientX,y:e.clientY});
    }

handleMouseMove 컴포넌트가 실행되어질 영역을 따로 만든 후 그 안에서 실행되어지게 한다.

<div onMouseMove={(e)=>handleMouseMove(e)}>
    <div className="itemId" onMouseOver={()=>onPopUpImage(i.productId)} onMouseLeave={()=>onPopUpImageFalse()}>
    {i.productId}
    {onHover ===i.productId && <img src={i.productImgFst} className="popUpImage" style={{left:xy.x,top:xy.y}}/>}
</div>