[React] 익숙해지기

sjoleee_·2022년 4월 19일
0

리액트를 막 시작해서 이것저것 만져보고 있다.
블로그.. 는 아니지만 그냥 그런 느낌으로 이런저런 개념을 써보는 중이다.
state, props를 중점적으로 공부하고 있는데 편한듯 불편한듯 오묘하다.
어제 강의를 들으며 무지성으로 따라쳤던 코드를 오늘 완전 백지에서부터 다시 혼자 만들어보면서 익숙해지려고 노력했다.

변경 전

  • 글쓰기 기능
    • 단, 회고 1~3은 고정
    • input에 입력된 값을 title에 추가하는 방식
  • 날짜 기능은 구라임
    • 그냥 아무 날짜나 고정
    • 그래서 새로 쓴 글에는 날짜가 안나옴
  • star count 기능
    • 각 article별로 star count 가능
    • 단, 새로 쓴 글에서는 제대로 동작하지 않는 버그가 있음
  • modal
    • modal 상태값을 boolean으로 저장해두고 true일때 노출하는 방식
    • 각 article의 title 클릭시 setModal(!modal)로 켜고 끔
    • 클릭한 title을 가져옴

이렇게 너무 별로였던 습작을 리팩토링했다!
기능도 대폭(?) 개선했다.

변경 후

  • 글쓰기 기능
    • 처음에 글이 없는 상태에서 시작
    • input에 입력된 값을 title에 추가하는 방식
  • 날짜 기능 구현
    • 현재 시간을 new Date()로 가져왔음
    • 근데 좀 맘에 안들게 표시되네...
  • star count 기능
    • 각 article별로 star count 가능
    • 새로 쓴 글에서도 정상 작동(애초에 새로 쓴 글 밖에 없음 ㅋㅋ)
  • modal
    • modal 상태값을 boolean으로 저장해두고 true일때 노출하는 방식
    • 각 article의 title 클릭시 setModal(!modal)로 켜고 끔
    • 클릭한 title, date를 가져옴
import React, { useState } from "react";
import "./App.css";

function App() {
const [title, setTitle] = useState([]);
const [date, setDate] = useState([]);
const [star, setStar] = useState([]);
const [inputText, setInputText] = useState([]);
const [modal, setModal] = useState(false);
const [index, setIndex] = useState();
const today = new Date();

return (
  <div className="App">
    <div className="nav">blog</div>
    {title.map((param, idx) => {
      return (
        <div className="article">
          <h2
            className="title"
            onClick={() => {
              setModal(!modal);
              setIndex(idx);
            }}
          >
            {param}
          </h2>
          <p
            className="star"
            onClick={() => {
              let starArrCount = [...star];
              starArrCount[idx]++;
              setStar(starArrCount);
            }}
          >
            ⭐️{star[idx]}
          </p>
          <p className="date">{date[idx]}</p>
        </div>
      );
    })}

    <div className="publish">
      <input
        onChange={(e) => {
          setInputText(e.target.value);
        }}
      ></input>
      <button
        onClick={() => {
          let titleArr = [...title];
          titleArr.push(inputText);
          setTitle(titleArr);
          let starArr = [...star];
          starArr.push(0);
          setStar(starArr);
          let dateArr = [...date];
          dateArr.push(String(today));
          setDate(dateArr);
        }}
      >
        write
      </button>
    </div>
    {modal === true ? (
      <Modal index={index} title={title} date={date} />
    ) : null}
  </div>
);
}

function Modal(props) {
return (
  <div className="modal">
    <h3>{props.title[props.index]}</h3>
    <p>{props.date[props.index]}</p>
  </div>
);
}

export default App;

완전 백지부터 다시 만들면서 조금은 익숙해진 것 같다.
문법이 잘 기억안나는 부분이 있긴 했는데, 어제의 내가 짠 코드를 보며 복습하니 어디가 잘못됐었는지도 눈에 보이고 좋더라.
아직 더 구현하고싶은 기능이 있는데, 내일이나... 시간 되면 한 번 해봐야겠다.

더 구현할 기능

  • 날짜 가독성 좋게
  • button 클릭시 input의 value를 초기화
  • 현재는 modal이 켜져있는 상태로 어느 title이든 클릭하기만 하면 modal이 꺼지는데, 조건이 필요함
    • 클릭한 title = 현재 켜져있는 modal의 title일 경우, modal을 꺼라
    • 클릭한 title != 현재 켜져있는 modal의 title일 경우, modal을 끄지 않고, 클릭한 title값으로 업데이트한다.

내일은 저녁에 바쁠 예정. 하하...

profile
개발... 그게 뭔데...

0개의 댓글