[코딩애플]react component 동적UI 3step

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

function App() {


  let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천'])
  let [좋아요, set좋아요] = useState(0);


  return (
    < div className="App" >
      <div className="black-nav">

        <h4>블로그</h4>
      </div>

      <button onClick={() => {
        //1 depth 깊은복사
        let 제목정렬 = [...제목].sort();
        제목변경(제목정렬);
      }}>제목 정렬!</button>

      <div className='list'>
        <h4>{제목[0]} <span onClick={() => {
          set좋아요(좋아요 + 1)
        }}>👍</span> {좋아요} </h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4>{제목[1]}<span onClick={() => {
          //1 depth 깊은복사
          let copy = [...제목];
          copy[1] = '다람쥐 코트 추천';
          제목변경(copy);
        }}>🐿️</span></h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4>{제목[2]}</h4>
        <p>2월 11일 발행</p>
      </div>


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

      <Modal></Modal>

      <Modal />

    </div >
  );
}

const Modal2 = () => { };
//이렇게도 가능암.

function Modal() {
  return (
    //return소괄호 안에는 항상 병렬 금지
    //묶는용으로 <></>fragment문법
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

//function APP(){}내부의 변수르 가져다가 사용을 할 수가 없음.
// props로 가능하나 귀찮.

export default App;

컴포넌트는 html묶음을 하나의 태그로 저장해주는 기능임.

다만, 내부의 변수를 수정하려면 여러 과정을 지나야함(추후 props로 다룸)

 

\

---

 

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

function App() {


  let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천'])
  let [좋아요, set좋아요] = useState(0);
  let [modal, setModal] = useState(true);


  return (
    < div className="App" >
      <div className="black-nav">

        <h4>블로그</h4>
      </div>

      <button onClick={() => {
        //1 depth 깊은복사
        let 제목정렬 = [...제목].sort();
        제목변경(제목정렬);
      }}>제목 정렬!</button>

      <div className='list'>
        <h4>{제목[0]} <span onClick={() => {
          set좋아요(좋아요 + 1)
        }}>👍</span> {좋아요} </h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4>{제목[1]}<span onClick={() => {
          //1 depth 깊은복사
          let copy = [...제목];
          copy[1] = '다람쥐 코트 추천';
          제목변경(copy);
        }}>🐿️</span></h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4 onClick={() => {
          modal ? setModal(false) : setModal(true)
        }}>{제목[2]}</h4>
        <p>2월 11일 발행</p>
      </div>

      {
        //삼항연산자만 가능.
        modal ? <Modal /> : null
        //증괄호 내부에 하나의 조건식만 가능.
      }

    </div >
  );
}

const Modal2 = () => { };
//이렇게도 가능암.

function Modal() {
  return (
    //return소괄호 안에는 항상 병렬 금지
    //묶는용으로 <></>fragment문법
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

//function APP(){}내부의 변수르 가져다가 사용을 할 수가 없음.
// props로 가능하나 귀찮.

export default App;

동적인 UI만들기 

동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는

모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다. 

 

1. html css로 미리 UI 디자인을 다 해놓고

2. UI의 현재 상태를 state로 저장해두고

3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성