[React] 제목을 누를 때 각각 다른 UI가 나오도록 하기.

제목을 누를 때 각각 다른 모달창이 뜨도록 하기.

1 몇번째 제목을 눌렀는지 상태정보를 state에 저장하고

2 state가 0일 때는 0번째 제목을 출력, 

  state가 1일 때는 1번째 제목이 나오도록 출력해야 한다.

 

UI 만드는 법

1 UI와 관련된 중요 정보들을 state로 저장해놓고

2 state에 따라서 UI가 수정되게 만든다.

 

※ state는 UI의 현재상태를 보관하는 저장소역할을 하는구나라고 생각하면 된다.

 

1 모달 컴포넌트에서 제목을 눌렀을 때 누른 제목의 숫자가 나오게 한다.

function Modal(props){
	return(
    	<div className="modal">
        	<h2>{props.글제목[누른제목번호]}</h2>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

 

2 변수 지정

중요한 정보는 일반 변수가 아니라 state로 만든다.

let [누른제목, 누른제목변경] = useState(0);

 

3 부모가 가진 state를 쓰려면 props로 신고하고 써야한다.

<Modal 글제목={글제목} 누른제목={누른제목}/>

Modal이라는 태그 안에서 원하는 이름의 props를 전송한다.

function Modal(props){
	return(
    	<div className="modal">
        	<h2>{props.글제목[props.누른제목]}</h2>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

 

4 버튼을 눌렀을 때 누른제목의 state가 변경되어야 한다.

<button onClick={() => {누른제목변경(0)}} 버튼1 </button>
<button onClick={() => {누른제목변경(1)}} 버튼2 </button>
<button onClick={() => {누른제목변경(2)}} 버튼3 </button>

5 글 제목부분에 가서 state가 변경되게 만든다.

{
	글제목.map(function(a, i){
    	return (
        	<div className="list">
            	<h3 onClic={ () => {누른제목변경(i) }> {a} <span>👍</span></h3>
                <p>2월 18일 발행</p>
                <hr />
            </div>
        })
 }

map 반복문을 쓸 때 i라는 파라미터를 두번째 파라미터 자리에 추가해주면

반복문이 돌면서 0, 1, ,2 ,3 이렇게 하나씩 증가하는 정수를 뜻한다.