Coding Apple, React 강좌 내용 정리.7 - UI 제작패턴 (props 등 이용)

UI 만드는 법

1. UI와 관련된 중요 정보들을 state로 저장해놓고
2. state에 따라서 UI가 수정되게 만든다

저번 내용 참조

React 강좌 내용 정리.5 - Component 기초, 사용하기 (기본 소스 포함)
React 강좌 내용 정리.6 - map, for / props

 

목표

* 각 list의 제목을 클릭하면, Modal의 타이틀 변경해서 보여주기

 

1. 기본적인 내용을 state로 선언

function App() {
  // 글제목 state
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  // 누른제목의 index 번호를 저장하는 state
  let [누른제목,누른제목변경] = useState(0)

 

2. 글목록 관련된 내용

{
  // i : 반복문의 index
  글제목.map( function(글, i){
    return (
  	  <div className="list">
  	    <h3 onClick={ ()=> { 
  	  	    누른제목변경(i) // 제목변경을 위한 인덱스 번호 할당
  	  	  }
		}
  	    >{글}<span onClick={ ()=> {좋아요변경(좋아요+1) } }>👍</span>{좋아요}</h3>
  	    <p>2월 17일 발행</p>
  	    <hr />
  	  </div>
    )
  })
}

 

3. 보여줄 Modal (Comments 항목들)

props에 모든 넘겨주는 state값(들) 있다.

// 부모에게 전달받은 props는 여기에 다 들어있다
function Modal(props){
  return (
    <div className="modal">
        <h2>제목 {props.글제목[props.누른제목]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

 

4. Modal 항목 표시

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

 

full source

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

function App() {
  // 글제목 state
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  // 누른제목의 index 번호를 저장하는 state
  let [누른제목,누른제목변경] = useState(0)
  let [modal, modal변경] = useState(false);
  let [좋아요, 좋아요변경] = useState(0);

  function 항목들(){
    var arr = [];
    for (var i=0; i<3; i++){
      arr.push(<div>항목반복</div>);
    }
    return arr
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      {
        // i : 반복문의 index
        글제목.map( function(글, i){
          return (
            <div className="list">
              <h3 onClick={ ()=> { 
                누른제목변경(i) // 제목변경을 위한 인덱스 번호 할당
                } }
              >{글}<span onClick={ ()=> {좋아요변경(좋아요+1) } }>👍</span>{좋아요}</h3>
              <p>2월 17일 발행</p>
              <hr />
            </div>
          )
        })
      }

      <button onClick={ ()=>{modal변경(!modal)} }>열고닫기</button>

      {
        modal === true
        ? <Modal 글제목={글제목} 누른제목={누른제목}></Modal>
        : null
      }
    </div>
  );
}

// 부모에게 전달받은 props는 여기에 다 들어있다
function Modal(props){
  return (
    <div className="modal">
        <h2>제목 {props.글제목[props.누른제목]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

export default App;