[React] Blog 예제

📌 Blog1 기능 설명

1. 💚 클릭 시 숫자 1씩 증가
2. 글 수정 버튼 클릭 시 남자코트 추천 일 때 여자코트 추천으로, 여자코트 추천 일 때는 남자코트 추천으로 글 수정
3. 모달창 버튼 클릭 시 모달화면 show/hide

전체코드

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

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

function App() {
  //array/object다룰 때 원본 보존하는 게 좋음
  const [lists, setLists] = useState([
    "남자코트 추천",
    "강남 우동 맛집",
    "리액트 공부",
  ]);
  const [count, setCount] = useState(0); //💚 클릭 시 숫자 증가
  const [modal, setModal] = useState("false"); // 리액트 공부 버튼 클릭 시 모달창 show/hide

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

      <div className="list">
        <h4>
          {lists[0]} <span onClick={() => setCount(count + 1)}>💚</span> {count}
        </h4>

        <button
          onClick={() => {
            const newList = [...lists]; //배열 내 [대괄호]를 제거하고 값을 보여줌
            newList[0] =
              lists[0] === "남자코트 추천" ? "여자코트 추천" : "남자코트 추천";
            setLists(newList);
          }}
        >
          글 수정
        </button>
        <p>6월 21일 발행</p>
      </div>

      <div className="list">
        <h4>{lists[1]}</h4>
        <p>6월 21일 발행</p>
      </div>

      <div className="list">
        <h4>{lists[2]}</h4>
        <p>6월 21일 발행</p>
      </div>

      <div className="list">
        <button
          onClick={() => {
            setModal(!modal); //true면 false, false면 true
          }}
        >
          모달창
        </button>
        {modal === true ? <Modal /> : null}
      </div>
    </div>
  );
}

export default App;

📌 <Blog1 풀이>

✔️ Array Object 를 다룰 때는 원본을 보존하는 게 좋다

<button
   onClick={() => {
     const newList = [...lists]; //새로운 변수를 만들어 원본을 보존
     newList[0] = //newList변수에 삼항연산자를 이용해서 클릭 시 글자 바뀌는 기능을 넣어줌
     lists[0] === "남자코트 추천" ? "여자코트 추천" : "남자코트 추천";
     setLists(newList); // 상태변화함수 인수에 변수를 넣어줌
   }}
>
  글 수정
</button>
<p>6월 21일 발행</p>
</div>

✔️ state 변경함수 특징

• 상태변화함수() 괄호안에 값을 넣으면 값이 변경된다
• 기존 state === 신규 state의 경우, 즉 같을 경우 state 변경이 불가하다

✔️ setModal(true), setModal(!modal)의 차이
처음에는 state modal의 초기값이 false 여서 setModal(true)와 setModal(!modal) !를 붙이게 되면 true로 변하게 되니까 같은 의미인 줄 알았다
setModal(true) 이렇게 쓰게 되면 true로 고정이 되기 때문에 false로 변할 수 없고, 모달창은 열리는 기능만 가능하게 된다 닫히는 기능이 되지 않았기에 의문이 들었다 ... ! 의미를 잘 알아보면 true 일 때는 false로, false일 때는 true로 변환을 해주기 때문에 setModal(!modal) 이렇게 작성하면 열리고 닫히는 기능이 잘 된다 !

!의 의미를 잊지 않기 위해 다시 말해보자면 ,,
!true 일 때 false
!false 일 때 true
만약에 !!true 이 코드처럼 !! 두개 있는 경우는 false가 됐다가 다시 true로 되기 때문에 true가 된다

📌 Blog2 배열 메서드 map 사용 및 기능 설명

1. 💚 클릭 시 숫자 1씩 증가되나 각각 개별적으로 증가

      {lists.map((list, i) => {
        return (
          <div className="list" key={i}>
            <h4>
              {lists[i]}
              <span
                onClick={() => {
                  let copy = [...count];
                  copy[i] = count[i] + 1;
                  setCount(copy);
                }}
              >
                💚
              </span>
              {count[i]}
            </h4>
            <p>6월 21일 발행</p>
          </div>
        );
      })}
    </div>

📌 <Blog2 풀이>

✔️ map 특징

• 중괄호 내부에서는 for문, 조건문등 사용이 불가하다
• array 자료 개수만큼 함수 안의 코드가 실행된다
• 함수의 매개변수는 array 안에 있던 데이터들은 보여준다
• return 뒤에 적어주는 코드들은 배열의 자료로 담아준다

✔️ lists의 매개변수 첫번째는 배열안에 있는 모든 데이터를 뜻하고, 두번째는 반복문 돌 때마다 0부터 1씩 증가하는 정수를 뜻한다

{lists[0]}
{lists[1]}
{lists[1]} // 이렇게 하나하나 불러주는 것 보다

{lists[i]} // 매개변수로 준 정수로 표현하여 코드를 축약할 수 있다

✔️ 반복문으로 html을 생성 할 경우에는 key를 추가해야 한다

<div className="list" key={i}> //반복 생성한 UI마다 구별하기 위해서 다른 키값으로 적어줘야 한다(매개변수가 아니고, 숫자로 적어줘도 된다)

출처

코딩애플 리액트