24. 05. 27 TIL (props-drilling-1)

어찌저찌 챕터1을 끝냈다. (잉?)어제 순식간에 진도를 나갔다. 그래서 코드를 다시 읽어보려고 하니까 무지 헷갈렸다......... 그러므로 챕터 1 코드를 정리할 겸 처음부터 작성해본다.1. 라우터 파일 그 전 세팅은 넘기고, 나는 강의대로 Router 폴더를 만들어 라우터 파일을 만들었다. 먼저 리액트와 필요한 라이브러리를 가져온다.import { useState } from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Home from '../pages/Home';import Detail from '../pages/Detail';그리고 각각 Home, Detail 페이지를 가져온다. const Month..

• format_list_bulleted 리액트
• · 2024. 5. 27.
• textsms

가계부 만들기 2

현 오후 12시 36분. 지금까지 입력 값을 받아서 맞는 달에 뿌리기 + 빈 값으로 저장하려고 하면 alert 띄우기를 했다. 어제 인풋 입력 값을 가져오는 건 하고 티스토리에 안 썼는데 이것부터 정리하자면~ 먼저 form에 onSubmit을 준다. 그리고 함수를 만들어서 제출할 때 실행되도록 했다. const submitForm = (e) => { e.preventDefault(); const newItem = { date: dateValue, item: itemValue, amount: amountValue, description: descriptionValue, id: uuidv4(), };제일 먼저 e.preventDefault(); 를..

• format_list_bulleted 리액트
• · 2024. 5. 24.
• textsms

가계부 만들기 1

본격적으로 가계부 만들기 시작!... 근데 어렵다. 1. 설치yarn create vite my-react-app --template reactcd my-react-appyarnyarn dev  2. yarn add styled-components  app.jsx 상단에 추가 import React from "react";import styled from "styled-components";  3.yarn add react-router-dom  4. Pages 폴더 -> Home, Detail.jsx 파일shared 폴더 -> Router.jsx Router.jsximport React from 'react';const Router = () => { return Router;};export defaul..

• format_list_bulleted 리액트
• · 2024. 5. 23.
• textsms

리액트로 todo list 만들기 2

그 다음엔 먼저 TodoList로 분리하고, TodoList 내에서 중복되는 코드가 있어서Todo로 분리했다. 일단 다 나눠버려서 TodoList는 이미 나눠진 코드다. 허헛 const TodoList = ({ todos, onDelete, moveDone }) => { return ( Working🏃‍♀️ {todos.map((todo) => { if (todo.isDone === false) { return ( ); } })} 일단 todos, onDelete, moveDone을 가져와서차례대로 넣어준다. 그리고 working에서 map을..

• format_list_bulleted 리액트
• · 2024. 5. 16.
• textsms

리액트로 todo list 만들기 1

리액트로 투두리스트 만들기! 더보기더보기킹갓제네럴⭐️⭐️님 덕분애... 대충 짰읍니다. 먼저 App.jsx 하나에 적었는데 먼저 화면에 띄워줄 것들을 작성한다.  html로 치면 뼈대 작성. function App () { return ()}여기 안에 작성해주면 되는데return 윗부분에는 함수를,return 안에는 html 뼈대를 만든다. 나는 헤더를 분리했다.const Header = () => { return ( My Todo List React );};export default Header;이런 식으로!! 그 다음이 todo를 입력하는 폼을 만들어줬는데역시 분리했다.import React from 'react';function TodoForm({ title,..

• format_list_bulleted 리액트
• · 2024. 5. 14.
• textsms

리액트 SPA, 프롭스, JSX 등

화살표 함수 (Arrow Function)화살표 함수는 기존의 함수 표현식보다 문법이 간결하여 코드를 더 깔끔하게 작성할 수 있습니다. 기본 구조는 () => {} 형태입니다.기존const addTraditional = function(a, b) { return a + b;};console.log(addTraditional(5, 3)); // 출력: 8단일 표현식 화살표 함수: function 키워드 없이 함수를 더 간결하게 표현할 수 있으며, 단일 표현식에서는 {}와 return 키워드가 필요 없습니다.const addArrow = (a, b) => a + b;console.log(addArrow(5, 3)); // 출력: 8다중 행 화살표 함수: 함수 본문이 여러 줄의 코드를 포함할 때는 {}를..

• format_list_bulleted 리액트
• · 2024. 5. 13.
• textsms