MERN 스택 학습 115일차

Hello Dev Community! 👋

It is officially Day 115 of my software engineering marathon! Today, I achieved a major milestone in my React.js transition. I moved completely away from hardcoded static mockups and upgraded my Todo Application into an actual data-driven interface module using complex React Props! ⚛️ arrays data-stream

Yesterday, my app looked good visually, but the data was hardcoded. Today, the entire interface renders dynamically by reading a structured dataset array passed from the parent component!

🧠 Deconstructing the Day 115 Array-Driven Architecture

As showcased live across my development workspace in “Screenshot (256).png” and “Screenshot (257).png”, the internal data schema flows through proper functional layers:

1. The Central Array Data Layer (App.jsx)

• Instead of typing individual rows inside the layout view, I structured a clean dataset containing explicit objects with distinct keys:

javascript
  const todoTasksArray = [
      { task: "Perform Player", date: "10/2/2001" },
      { task: "GO to College", date: "10/12/2004" },
      { task: "Do Maths", date: "10/8/2005" },
      { task: "Learn JS", date: "10/2/2007" }
  ];

Enter fullscreen mode Exit fullscreen mode