[TIL/React] 2023/07/03

오늘 한 일

import React, { forwardRef } from "react";
import { useSelector } from "react-redux";
import { styled } from "styled-components";
import { ComponentWrapper } from "../common";

const RecentTodoComponentWrapper = styled.div`
  height: 1000px;
  background-color: #f1e3d9;
`;

const RecentTodoTitle = styled.h1`
  font-weight: bolder;
  font-size: 70px;
  text-align: center;
  border-bottom: 9px solid #c07848;
  margin-bottom: 100px;
`;

const RecentTodoImage = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const RecentTodoContent = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const RecentTodoText = styled.p`
  font-size: 24px;
  margin-bottom: 16px;
`;

const RecentTodoComponent = forwardRef((props, ref) => {
  const { todo } = useSelector((state) => state.todos);
  const mostRecentTodo = todo.length > 0 ? todo[todo.length - 1] : null;
  return (
    <RecentTodoComponentWrapper ref={ref}>
      <ComponentWrapper
        style={{
          padding: "200px",
          boxSizing: "border-box",
        }}
      >
        {/* recent todo area */}
        <div
          style={{
            height: "100%",
            width: "55%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#fff",
          }}
        >
          <RecentTodoContent>
            <RecentTodoTitle>{mostRecentTodo?.Title}</RecentTodoTitle>
            <RecentTodoText>{mostRecentTodo?.Subtitle}</RecentTodoText>
            <RecentTodoText>{mostRecentTodo?.Desc}</RecentTodoText>
          </RecentTodoContent>
        </div>
        {/* image area */}
        <div
          style={{
            height: "100%",
            width: "45%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <RecentTodoImage
            src="https://kormedi.com/wp-content/uploads/2021/10/211025_02_01-580x410.jpg"
            alt="Recent Todo Image"
          />
        </div>
      </ComponentWrapper>
    </RecentTodoComponentWrapper>
  );
});

export default RecentTodoComponent;

파일 구조 변경에 따른 recent todo 재구성

회고

width와 height를 설정하며, 부모 컴포넌트로부터 논리적으로 접근했다. 평소 css는 단순히 view를 꾸며주는 것 그 이상도 이하도 아니라고 생각했는데, 처음부터 논리적으로 접근하지 않으면 코드가 무너지는 것을 목도하고, css도 상태관리와 다를 바 없다는 생각이 들었다. 추가적으로, 텍스트와 이미지 모두를 감싸는 div가 없어 border-radius를 줄 수 없었다는 아쉬움이 있었다.

인스타그램은 사진 게시판이다. 트위터는 텍스트 게시판, 유튜브는 영상 게시판이고 쿠팡은 상품 게시판이며 당근마켓은 중고거래 게시판이다. 세상 웬만한 서비스들의 프로토타입은 게시판이라는 뜻이다. 즉, 본질은 결국 게시판을 통한 CRUD 구현이다.

나를 둘러싸고 있는 문제들이 복잡하게 느껴질 때 가장 먼저 떠올려야 하는 문장, "Back to Basics". 오늘도 감사합니다.