[React] 5. map으로 게시글 반복, props로 모달창 응용

지렁·2023년 11월 2일

저번 포스팅에서는 1개의 post를 구현한 후 제목 클릭할 때마다 모달창을 열고 닫는 기능을 구현해보았다
⭐ 이번에 구현해볼 것은 ?!

title 배열 수에 따른 post 자동 생성

특정 post 클릭 시 해당 post의 모달창 열고 닫기

let [title,setTitle]=useState(['남자 코드 추천','강남 우동 맛집','파이썬 독학'])

title은 이렇게 배열로 저장되어 있던 state이다
지금까지는 우선 title[0] 값만 가져와서 1개의 post만 띄웠었다
하지만 어떻게하면 배열 수대로 post를 자동으로 만들어줄까??

➡ 반복문 !!

하지만 for 반복문은 JSX 중괄호 안에서 사용할 수 없어서 대신 map( )을 사용한다

📢 map

배열의 자료개수만큼 map 내부 코드를 실행해서 배열형태로 담아준다

👌 구분 가능 key 추가

map 반복문으로 반복생성한 html에는 구분가능한 key 값을 추가해야 한다
 {title.map(function(data, i){
      return (
      <div className="list" key={i}>
        <h4>{ data[i] }</h4>
        <p>2월 18일 발행</p>
      </div> )
        }) 
   }
첫째 파라미터 data는 array안에 있던 자료

둘째 파라미터 i는 0부터 1씩 증가하는 정수

그렇게 data[i]로 post를 title들을 잘 출력시켰다

현재는 어떤 post를 클릭해도 동일한 modal 창이 나온다
이번엔 모달 창의 title이 post의 title이 되도록 해보겟다

App의 title state를 Modal 함수에서 사용하면 되지 않을까?

function App (){
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>{ title[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

⚠ 에러 발생

App에 정의된 title state를 Modal 컴포넌트에서 사용하려고 한다면 에러가 난다
왜냐하면 title은 App에 있지, Modal에는 없기 때문이다
자바스크립트에서는 다른 함수에 있는 변수를 맘대로 가져다 쓸 수 없다 => 블록 스코프

하지만 props 를 사용하면 부모, 자식 관계의 컴포넌트에서는 부모에 위치한 변수를 자식에서 사용할 수 있다

📢 props

props로 state 변수 , 일반 변수, 함수를 전송할 수 있으며 ( -> 중괄호 o) 일반 문자도 전송 가능하다
그리고 반드시 부모-> 자식에만 가능하고 자식 -> 부모는 할 수 없다

자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />

자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

💪 1. props로 state 전송

위의 방법으로 App의 title을 Modal에 전송해보겠다

function App (){
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal title={title}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.title[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

💪 2. props로 문자 전송

modal의 스타일을 지정을 prop 전달을 통해 해보겠다

우선 Modal 컴포넌트 사용하는 곳에서

<Modal color={'skyblue'} />

위와 같이 prop을 만든 후에 자식 컴포넌트에서 color을 받아온다

function Modal({color}){
  return (
    <div className="modal" style={{ background : color }}>
      <h4>{ props.title[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

받아서 사용하고 싶은 곳에 color을 사용해주면 된다 ! 매우 간단 😊~

💪 3. props 로 함수 전송

이전 포스팅에서 모달창 관리는 불린형 modal state를 만들어서 클릭시 true, 또 클릭 시 false가 되도록 하여 조건문으로 모달창을 띄웠었다
하지만 map으로 post 를 3개 생성하고 보니, post가 3개 있는데 하나의 post를 눌러도 각 post의 모달창이 모두 등장한다
내가 누른 post의 모달창만 띄우려면 어떻게 해야할까?
props로 클릭할 때마다 클릭 한 post의 정보를 받아와서 Modal에 전달해주면 될 듯하다

우선 App에서 post의 정보를 받아올 value state를 만들었다

이곳에 post의 인덱스를 받아올 것이다
( 0,1,2로 구분할 거임 )

  let [title,setTitle]=useState(['남자 코드 추천','강남 우동 맛집','파이썬 독학'])
  let [value,setValue]=useState(null)

그리고 제목을 클릭할 때마다 value 값을 map으로 생성한 title의 index로 변경시킨다

<div 
            onClick={()=>{
            if(value==null) setValue(i)
            else if(value===i) setValue(null)
           }}> {data}
          </div>

만약 선택된 value가 없으면 value를 부여해주고, value가 있다면 null로 바꾼다

이전에는 불린형 modal state로 클릭 할 때마다 모달 열고닫는 기능을 구현했다면
이번에는 value stae를 통해 값이 있을때/없을때를 조건문으로 모달을 열고 닫아보았다

App 내의 모달 컴포넌트에서 위의 값들을 전송하고

value===i 일 때, 즉 클릭한 post의 value와 post의 정보가 같을 때만 Modal 컴포넌트를 렌더링한다

{value===i && 
<Modal 
  value={value}
  title={title} />  }

value : post의 index
title : App의 title state
(모두 내가 작명한 이름들이다)

function Modal({value,title}){
  return(
      <div className="modal">
        <h4>{title[value]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}