[React] 6강 | div 너무 많으면 Component

모달창 레이아웃 디자인하기

---

• 상세페이지를 담당할 모달 UI
  • App.jsx

      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    

  • App.css

      .modal {
      margin-top: 20px;
      padding: 20px;
      background: #eee;
      text-align: left;
      }
    

Component 문법

---

• 컴포넌트 만드는 법
  1. fucntion 만들고 (다른 function 바깥에서, 함수명은 영어 대문자로 시작)
  2. return() 안에 html 담기 (병렬로 태그 2개 이상 기입 x)
  3. <함수명></함수명> 쓰기
• App.jsx

    function Modal() {
    return (
        <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
    )
    }
  

    <Modal></Modal> // </Modal>만 입력해도 된다
  

• return() 안에 html 병렬 기입하려면 하나의 <div></div>로 감싸기 (혹은 <></>: fragment 문법)
• 어떤 것을 컴포넌트로 만들면 좋은가
  1. 반복적인 html 축약
  2. 큰 페이지들 자체를 컴포넌트로 (페이지 전환 등에 사용)
  3. 자주 변경되는 UI 등
• 컴포넌트의 단점
  1. 다른 함수 바깥에 있기 때문에 state 가져다쓸 때 문제가 생김
• 컴포넌트 만드는 법 2
  1. ex) const Modal = () => {}

6강까지

---

• App.jsx

    import { useState } from 'react'
    import reactLogo from './assets/react.svg'
    import viteLogo from '/vite.svg'
    import './App.css'
  
    function App() {
  
        let [글제목, 글제목변경] = useState(['스팀 할인 목록', '3월 전시 목록', '2025 영화 개봉작 목록'])
  
        let [하트, 하트변경] = useState([0, 0, 0]);
  
        return (
            <div className="App">
            <div className="black-nav">
            <h4 style=>MyBlog</h4>
            </div>
  
            <button onClick={ ()=>{
            let copy = [...글제목]
            글제목변경(copy.sort())
            }}>
            가나다순정렬
            </button>
  
            <button onClick={ ()=>{
            let copy = [...글제목]
            copy[0] = '스팀 할인 기간'
            글제목변경(copy)
            }}>글수정</button>
  
            <div className="list">
            <h4>{글제목[0]}<span onClick={ ()=> { 
                let copy = [...하트]
                copy[0] = (copy[0]+1)
                하트변경(copy)
            }}> ❤️</span> {하트[0]} </h4>
            <p>2월 18일 발행</p>
            </div>
  
            <div className="list">
            <h4>{글제목[1]}<span onClick={ ()=> { 
                let copy = [...하트]
                copy[1] = (copy[1]+1)
                하트변경(copy)
            }}> ❤️</span> {하트[1]} </h4>
            <p>2월 18일 발행</p>
            </div>
  
            <div className="list">
            <h4>{글제목[2]}<span onClick={ ()=> { 
                let copy = [...하트]
                copy[2] = (copy[2]+1)
                하트변경(copy)
            }}> ❤️</span> {하트[2]} </h4>
            <p>2월 18일 발행</p>
            </div>
  
            <Modal></Modal>
            <Ad></Ad>
  
            </div>
              
        )
    }
  
    function Modal() {
    return (
        <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
        </div>
    )
    }
  
    const Ad = () => {
    return (
        <div className="ad">
        <h4>광고</h4>
        <p>싸다 싸</p>
        <p>젤다 닌텐도칩이 단돈 9,900원</p>
        </div>
    )
    } 
  
    export default App
  

• App.css

    .black-nav {
    display: flex;
    background: black;
    width: 100%;
    color: white;
    padding-left: 20px;
    }
  
    div {
    box-sizing: border-box;
    }
    .list {
    padding-left: 20px;
    text-align: left;
    border-bottom: 1px solid grey;
    }
  
    .modal {
    margin-top: 20px;
    padding: 20px;
    background: #eee;
    text-align: left;
    }
    .ad {
    margin-top: 30px;
    padding: 5px;
    background: #b32f2f;
    color: white;
    text-align: left;
    }
  

• 이미지