오늘의 React

1. Component

• 더러운 html을 깔끔하게 한 단어로 축약하고 싶을때 componenet를 사용
• 첨보는 사람들도 이해할 수 있다
• 컴포넌트 만드는 법
  • function 만들고
    • 다른 function 바깥에 만들자
    • 영어 대문자로 시작
  • return()안에 html 담기
    • 하나의 태그로 시작해서 하나의 태그로 끝나야한다.
    • 병렬로 집어넣는게 안 돼
      • 만약에 병렬기입하려면 div 두 개로 묶은 부분을 하나 더 크게 div로 묶는다.
      • 의미없는 <div>대신 <></> 사용가능 전문용어로 fragment라고 한다.
  • <함수명></함수명> 쓰기
    • <함수명/> 이렇게도 사용 가능하다.
• 컴포넌트 언제 쓰면 좋은가?
  • 반복적인 html 축약할 때
  • 큰 페이지(페이지 전환시)
  • 자주변경되는 UI && html 들
• 컴포넌트의 단점
  • State를 가져다 쓸 때 문제 생긴다. 다른 함수에 있을때는 그 함수에 있던 변수는 맘대로 가져다 쓸 수 없다.
  • 변수의 범위가 함수라서 그렇다.

2. 동적인 UI 만드는 step

• html css로 미리 디자인 완성
• UI의 현재 상태를 state로 저장
  • state를 저장할 때 오른쪽에 변경 함수는 보통 set~~ 이런식이 관습이다.
  • useState() 안에 형식은 자유다. 모달창상태 표현만 가능하면 된다.
• state에 따라 UI가 어떻게 보일지 작성
  • html에 중간에 조건문을 쓰려면 중괄호 안에 if문을 사용할 수 없으니 대용품이 있다. 삼항연산자
  • 조건식? 참일때 실행할 코드 : 거짓일 때 실행할 코드
  • 아닐 경우 빈 문자열을 출력하거나 null(텅빈 값)
  • 쉽게 말해 스위치와 기계를 만드는거다.

/* eslint-disable */

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

function App() {

  let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]);

  let [좋아요, 좋아요변경] = useState(0);

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



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

      <div className="list">
        <h4> { 메뉴 } <span onClick={ () => { 좋아요변경(좋아요+1) } }>👍</span> { 좋아요 } </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4> { 메뉴[1] } </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <div>
          <h4> {매뉴[2]} </h4>
          <p>2월 17일 발행</p>
          // modal = false => true;
          <button onClick={ ()=>{ setModal(!modal) } }> { 메뉴[2] } </button>
          // modal이 true이면 Modal창을 띄어줌
          {
            modal == true ? <Modal></Modal> : null
          }
        </div>
      </div>
    </div>
  );
}

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

export default App;