[React] props를 이용한 동적인 모달창 만들기

오늘은 글 제목을 클릭하면 제목에 따라 모달창이 바뀌는 기능을 구현하는 것을 이해해보겠습니다.

 

[결과물]

상단: 제목 list /  하단(회색배경): 모달

> '강남 우동 맛집' 을 클릭하면 하단 모달의 남자코트 추천이 강남 우동 맛집으로 바뀐다.

 

# code

사용자가 제목을 클릭하면 모달창의 제목이 클릭된 제목으로 변한다.

 

key ★ 모달창의 제목을 동적인 UI로 생각한다.

 

1. 먼저 모달 컴포넌트를 생성한다.

// 모달 컴포넌트

const Modal = () => {
	return(
        <div className='modal'>
          <h4> 제목 넣을 곳 </h4>
          <h4>나이: 25세</h4>
          <h4>직업: 학생</h4>
          <button>글수정</button>
        </div>
    )
}

 

2. 모달 컴포넌트에 전달할 제목을 state로 저장한다.

const [title, setTitle] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']);
const [titleIndex, setTitleIndex] = useState(0);

titleIndex는 제목들의 배열을 가져오기 위해서 0으로 선언해 놓는다.

 

 

3. 모달의 on/off를 설정한다.

const [onModal, setOnModal] = useState(false);

 

4. 삼항 연산자를 이용해서 onModal의 상태에 따라 모달창을 동적으로 관리한다.

{
	onModal === true
    	? <Modal/>
    	: null
}

 

5. 글제목 list를 생성하고, onClick 이벤트를 이용해서 state를 변경한다.

// App 컴포넌트
title.map(function(v,i){
	return(
    	<div className="list">
    		<h4 onClick={() => {setOnModal(!onModal)}}>{v}</h4>
        </div>
    )
})

map()을 이용해서 제목 list를 만들어주고, onClick이벤트로 onModal의 상태를 변경해준다.

 

6. 제목 클릭 시 바뀌는 index값을 Modal 컴포넌트에 전송해주기 위해서 props로 state를 전송해준다.

// App 컴포넌트
// 제목 클릭 시 제목의 index 변경
title.map(function(v,i){
	return(
    	<div className="list">
    		<h4 onClick={() => {setOnModal(!onModal); setTitleIndex(i)}}>{v}</h4>
        </div>
    )
})

// Modal 컴포넌트로 props 연동하기
{
	onModal === true
    	? <Modal title={title} setTitle={setTitle} titleIndex={titleIndex}/>
    	: null
}

 

7. 받아온 글제목과 글제목 index를 이용해서 Modal 컴포넌트의 제목을 변경한다.

// 모달 컴포넌트
// props 연동 후 데이터 바인딩
const Modal = (props) => {
	return(
        <div className='modal'>
          <h4> {props.title[props.titleIndex]} </h4>
          <h4>나이: 25세</h4>
          <h4>직업: 학생</h4>
          <button>글수정</button>
        </div>
    )
}

 

어렵네요! 

안녕~