[React] 리액트 클릭시 나오는 상세페이지UI 만들기 - component/props

 

 

※ 요약

1. 제목 state 하나 만들어줘서 0으로 둔다

→ let [title, setTitle]=useState(0);

1. 부모 컴포넌트에서 <자식컴포넌트명 작명={state이름}> 작성

→ <Modal 글제목={글제목} 타이틀={title}/>

1. 자식 컴포넌트쪽에 props 파라미터 등록 후 props.작명 으로 사용

→ {props.글제목}

1. 클릭한 글제목의 숫자를 title 배열 안에 저장해서 사용할 수 있도록 한다

→ {props.글제목[props.타이틀]}

1. 클릭하는 부분의 글제목에 onClick에서 title 변경 함수를 이용해 글제목의 숫자를 바꿔준다.

→ setTitle(i)

 

 

반응형

 

 

 

1. 제목 div onClick에 상세페이지 기능 추가

→ onClick={()=>{setModal(!modal)}}

{글제목.map((a,i)=>{return(
     <div className='list'>
       <div **onClick={()=>{setModal(!modal)}}**>{글제목[i]}
       <span onClick={()=>{let copy = [...좋아요];
				copy[i]+=1;
				좋아요변경(copy);	
				}}>👍</span> {좋아요[i]}
        </div>
       <p>3월 28일</p> 
      </div>
    )})}

 

2. 부모 컴포넌트에서 <자식컴포넌트명 작명={state이름}> 작성

{
    modal === true
    ? <Modal **글제목={글제목}**/>
    : null
  }

 

3. 자식 컴포넌트쪽에 props 파라미터 등록 후 props.작명 으로 사용

//자식컴포넌트
function Modal(**props**){
  return(
    <div className='modal'>
      <div>**{props.글제목}**</div>
      <p>발행일자</p>
      <div>상세내용</div>
    </div>
  )
}

 

 

4. 3번처럼만 하면 글제목 배열에 저장되어 있는 모든 배열 객체들이 나열됨

• {props.글제목} 안에 배열의 순번을 알아야함

 

5. 부모 컴포넌트에 제목 state를 하나 만들고 0으로 둔다.

 let [title, setTitle] = useState(0);

 

6. 부모 컴포넌트에 연결

{
    modal === true
    ? <Modal 글제목={글제목} **타이틀={title}**/>
    : null
  }

 

7. 자식컴포넌트에 클릭한 글제목의 숫자를 title 배열 안에 저장해서 사용할 수 있도록 한다

//자식컴포넌스
function Modal(props){
  return(
    <div className='modal'>
      <div>{props.글제목**[props.타이틀]**}</div>
      <p>발행일자</p>
      <div>상세내용</div>
    </div>
  )
}

 

8. 클릭하는 부분의 글제목에 onClick에서 title 변경 함수를 이용해 글제목의 숫자를 바꿔준다.

{글제목.map((a,i)=>{return(
     <div className='list'>
       <div onClick={()=>{setModal(!modal); **setTitle(i)**}}>{글제목[i]}
       <span onClick={()=>{let copy = [...좋아요];
				copy[i]+=1;
				좋아요변경(copy);	
				}}>👍</span> {좋아요[i]}
        </div>
       <p>3월 28일</p> 
      </div>
    )})}

 

9. 버그 없애기

• 좋아요를 눌렀을 때에도 상세페이지가 나타나는 버그가 있음
• 이벤트버블링 → 클릭이벤트는 상위 hmtl로 퍼짐
• 해결방법 → 하위 html 에

(e)=>{e.stopPropagation();} 이걸 적어주면 됨

import logo from './logo.svg';
import React, { useState } from 'react';
import './App.css';

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);
let [좋아요, 좋아요변경] = useState([0,0,0]);
let [modal, setModal] = useState(false); 
let [title, setTitle] = useState(0);

 return(
   <div>

   {글제목.map((a,i)=>{return(
     <div className='list'>
       <div onClick={()=>{setModal(!modal); setTitle(i)}}>{글제목[i]}
       <span onClick={(**e**)=>{
				**e.stopPropagation();**
				let copy = [...좋아요];
				copy[i]+=1;
				좋아요변경(copy);	
				}}>👍</span> {좋아요[i]}
        </div>
       <p>3월 28일</p> 
      </div>
    )})}

  <button onClick={()=>{setModal(!modal)}}>상세페이지</button>

  {
    modal === true
    ? <Modal 글제목={글제목} 타이틀={title}/>
    : null
  }

    </div>  
 )  
}

//자식컴포넌스
function Modal(props){
  return(
    <div className='modal'>
      <div>{props.글제목[props.타이틀]}</div>
      <p>발행일자</p>
      <div>상세내용</div>
    </div>
  )
}

export default App;

 

10. 결과

import logo from './logo.svg';
import React, { useState } from 'react';
import './App.css';

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);
let [좋아요, 좋아요변경] = useState([0,0,0]);
let [modal, setModal] = useState(false); 
let [title, setTitle] = useState(0);

 return(
   <div>

   {글제목.map((a,i)=>{return(
     <div className='list'>
       <div onClick={()=>{setModal(!modal); setTitle(i)}}>{글제목[i]}
       <span onClick={(e)=>{
				e.stopPropagation();
				let copy = [...좋아요];
				copy[i]+=1;
				좋아요변경(copy);	
				}}>👍</span> {좋아요[i]}
        </div>
       <p>3월 28일</p> 
      </div>
    )})}

  <button onClick={()=>{setModal(!modal)}}>상세페이지</button>

  {
    modal === true
    ? <Modal 글제목={글제목} 타이틀={title}/>
    : null
  }

    </div>  
 )  
}

//자식컴포넌스
function Modal(props){
  return(
    <div className='modal'>
      <div>{props.글제목[props.타이틀]}</div>
      <p>발행일자</p>
      <div>상세내용</div>
    </div>
  )
}


export default App;