[React] props 를 응용한 상세페이지 만들기

💡 실습 포인트!

• 모달창이 열려있을 때 게시글의 제목을 클릭하면, 모달창의 제목 부분을 게시글의 제목으로 데이터바인딩을 해서 마치 상세페이지를 여는 듯한 효과를 주었다.

---

💜 props 이해하기

🤍 기존 모달창 다시 보기

• 기존 모달창을 다시 보면 제목, 날짜, 상세내용이 하드코딩되어있는데, 그 중 제목 부분이 데이터바인딩되어 보여야 하는 것이다.

---

🤍 props 이해하기

// 코드에서 App Component 와 <Modal /> Component 의 구조를 보여주기 위해
// 불필요한 코드는 임의로 제외했다.

function App() {

  let [title, setTitle] = useState([
      '[React] React 설치와 개발환경 셋팅하기', 
      '[React] JSX 를 이용해 HTML 페이지 제작해보기', 
      '[React] React 에서 state 변경해보기'
  ]);
  
  let [modal, setModal] = useState(false);

  return (
    <div className="App">

      {
        title.map(function(content){
          return (
          <div className='list'>
            <h3>{content}</h3>
            <p>2022-03-18</p>
            <hr/>
          </div>            
          )
        })
      }
      
      <button onClick={ ()=>{ setModal(!modal) } }>모달창 여닫기</button>
      {modal === true ? <Modal /> : null}
    </div>
  );
}

• 위의 코드 구조를 살펴보면 App 이라는 Component 안에 <Modal /> 이라는 Component 가 들어있다.
• 이를 부모-자식 관계라고 하며, 이 때 App 이 부모에 해당하며 Modal 이 자식에 해당한다.
• 모달창의 제목 부분에 게시글의 제목들을 데이터바인딩해주기 위해서는 title 이라는 state 를 <Modal /> Component 에서 사용할 수 있어야 한다.  
• 이렇게 자식 Component 가 부모 Component 안에 있던 state 를 가져다 사용하기 위해서는 props 라는 문법으로 state 를 전송받아 { props.state이름 } 의 형식으로 코드를 작성해주어야 한다.

 

• props 의 사용법은 다음과 같다.
  • < 자식_Component 전송할_때_사용할_이름 = { state_이름 } > 으로 코드를 작성한다.
  • 자식 Component 를 선언하는 function 안에 파라미터를 하나 만들어준다.

 

---

💜 <Modal /> 에 첫번째 게시글 제목 하나만 데이터바인딩해보기

🤍 props 사용해보기

// 전체 코드 미리보기

function App() {

  let [title, setTitle] = useState([
      '[React] React 설치와 개발환경 셋팅하기', 
      '[React] JSX 를 이용해 HTML 페이지 제작해보기', 
      '[React] React 에서 state 변경해보기'
  ]);

  let [modal, setModal] = useState(false);

  return (
    <div className="App">

      {
        title.map(function(content, idx){
          return (
          <div className='list'>
            <h3>{content}</h3>
            <p>2022-03-18</p>
            <hr/>
          </div>            
          )
        })
      }

      <button onClick={ ()=>{ setModal(!modal) } }>모달창 여닫기</button>
      {modal === true ? <Modal title={title} : null}
    </div>
  );
}

function Modal(props){
  return (
    <div className='modal'>
      <h2>제목: {props.title[0]}</h2>
      <p>날짜: 2022-03-18</p>
      <p>상세내용</p>
    </div>
  )
}

• 앞서 <Modal /> 이라는 자식 Component 가 App 이라는 부모 Component 가 가지고있는 state 를 사용하고 싶다면 props 라는 문법으로 state 를 전송받아야한다고 했다.

{modal === true ? <Modal title={title} /> : null}

• < 자식_Component 전송할_때_사용할_이름 = { state_이름 } > 라는 양식에 맞추어 위와 같이 코드를 작성해주었다.
  • 자식_Component : Modal
  • 전송할_때_사용할_이름 : title
  • state_이름 : title

function Modal(props){
  return (
    <div className='modal'>
      <h2>제목: {props.title[0]}</h2>
      <p>날짜: 2022-03-18</p>
      <p>상세내용</p>
    </div>
  )
}

• 그러고 나서, 자식 Component 를 선언하는 function 안에 파라미터를 하나 만들어준다.
• 보통 관습에 따라 파라미터명을 props 를 많이 사용한다.
• 그러면 부모 Component 에서 전송받은 state 들이 객체의 형태로 props 라는 파라미터이름으로 전달이 된다.
• 따라서 props.전송할_때_사용할_이름 과 같은 형태로 사용할 수 있다. 
• 다만, 위 코드의 경우 받아온 title 이라는 이름으로 전송받은 title state 의 자료형이 array 이므로 인덱스까지 코드로 적어주어야 제대로 사용이 가능하다.

---

🤍 브라우저에서 데이터바인딩 여부 확인해보기

• 브라우저에서 모달창을 확인하면 정상적으로 title state 의 0번 인덱스 값이 데이터바인딩되어있는 것을 확인할 수 있다.

---

💜 <Modal /> 에 클릭한 게시글의 제목을 데이터바인딩해보기

🤍 props 활용해보기

// 전체 코드 미리보기

function App() {

  let [title, setTitle] = useState([
      '[React] React 설치와 개발환경 셋팅하기', 
      '[React] JSX 를 이용해 HTML 페이지 제작해보기', 
      '[React] React 에서 state 변경해보기'
  ]);

  let [modal, setModal] = useState(false);

  let [clickedNum, setClickedNum] = useState(0);

  return (
    <div className="App">

      {
        title.map(function(content, idx){
          return (
          <div className='list'>
            <h3 onClick={()=>{setClickedNum(idx)}}>{content}</h3>
            <p>2022-03-18</p>
            <hr/>
          </div>            
          )
        })
      }

      <button onClick={ ()=>{ setModal(!modal) } }>모달창 여닫기</button>
      {modal === true ? <Modal title={title} clickedNum={clickedNum}/> : null}
    </div>
  );
}

function Modal(props){
  return (
    <div className='modal'>
      <h2>제목: {props.title[props.clickedNum]}</h2>
      <p>날짜: 2022-03-18</p>
      <p>상세내용</p>
    </div>
  )
}

• 이번에는 배운 것들을 응용하여 각 게시글의 제목을 클릭하면, 게시글의 제목이 모달창의 제목 부분으로 데이터바인딩되도록 코드를 수정해보았다.
• 현재 Modal 함수의 제목 부분에 props.title[0] 이 들어가니까 title 이라는 state 의 0번 인덱스에 해당하는 제목이 데이터바인딩이 되는 것이다.
• 따라서 1번 인덱스에 해당하는 제목이 데이터바인딩이 되려면 props.title[1], 2번 인덱스에 해당하는 제목이 데이터바인딩이 되려면 props.title[2] 가 되면 된다.
• 그러면 이렇게 인덱스를 받아오기 위해 어딘가에는 인덱스를 추가해주어야 한다.
• 그리고 그에 적합한 게 바로 각 게시글 제목 부분이므로 각 게시글 제목에 인덱스를 추가해준다.
• 각 게시글의 제목을 클릭했을 때 모달창의 제목 부분 인덱스를 클릭한 게시글의 제목 부분에 해당하는 인덱스로 바꾸어주면 클릭한 게시물의 제목으로 데이터바인딩이 되는 것이다.

  let [clickedNum, setClickedNum] = useState(0);

• 인덱스를 바꾼다는 것은 즉, 인덱스 값을 변경할 함수가 필요하다는 것이므로 위와 같이 useState() 코드를 작성해주었다.

  {
    title.map(function(content, idx){
      return (
      <div className='list'>
        <h3 onClick={()=>{setClickedNum(idx)}}>{content}</h3>
        <p>2022-03-18</p>
        <hr/>
      </div>            
      )
    })
  }

• 그리고 각 게시물 제목에 인덱스를 추가해야하는데, map() 함수를 사용할 때는 두번째 파라미터가 들어가는 부분이 인덱스와 같은 역할(반복문이 돌면서 0,1,2.. 와 같이 하나씩 증가하는 정수를 의미)을 하므로 우선 파라미터 이름을 idx 라고 작성해주었다.
• 다음으로 게시글 제목을 클릭했을 때 clickedNum 이라는 state 의 값을 파라미터로 받은 idx 로 변경해주어야 하므로 onClick={ ()=>{ setClickedNum(idx) } } 과 같이 코드를 작성해주었다.

{modal === true ? <Modal title={title} clickedNum={clickedNum}/> : null}

• 이제 그렇게 게시글의 제목을 클릭할 때마다 변경되는 clickedNum 을 Modal function 으로 넘겨주어야 한다. 
• 따라서 props 문법에 따라 <자식_Component전송할_때_사용할_이름= {state_이름} > 라는 양식에 맞추어 위와 같이 코드를 추가로 작성해주었다.
  • 자식_Component : Modal
  • 전송할_때_사용할_이름 : clickedNum
  • state_이름 : clickedNum

 

function Modal(props){
  return (
    <div className='modal'>
      <h2>제목: {props.title[props.clickedNum]}</h2>
      <p>날짜: 2022-03-18</p>
      <p>상세내용</p>
    </div>
  )
}

• 마지막으로 받아온 props.clickedNum 을 props.title[] 안에 작성해주면 정말 게시물을 클릭할 때마다 해당 게시물 제목에 해당하는 idx 를 받아와 props.title[0], props.title[1], props.title[2] ... 이런 식으로 적용되어 모달창의 제목 부분에 정상적으로 데이터바인딩이 되는 것을 확인할 수 있다.

---

🤍 브라우저에서 데이터바인딩 여부 확인해보기