우당탕탕 아장아장

To Do List 정도는 껌으로 만들어야하는데, 나는 이가 없는 사람..🤐 힙겹고 어렵게 만들었고, 이제 다시 만들어볼 예정인 To Do List! 밥먹기 같은건 매일매일 잘 할 수 있는데, 리액트 공부하기와 투두리스트 만들기는 언제쯤.. 내 자신 화이팅.. 기능 ➕ 누르거나, 엔터를 치면 일정 입력 ✔ 를 누르면 텍스트 색 변경 + 중간에 줄 긋기 ➖ 누르면 아이템 삭제! 추가하고 싶은 기능 - 귀여운 폰트로 글씨체 변경 - 글자가 입력되지 않았을 경우 강조표시 🤦‍♂️ To Do List를 하면서 느끼고 배운 점 과정 1. 그림그리기 2. 전체적인 틀 만들기 3. UI만들기 (전체적인 틀, 입력 추가, 리스트 등) 4. 기능 구현 (체크박스 밑줄, 일정의 추가, 제거, 수정) map함수에는 key값..

8주차 목요일 14. 리액트 라우터 싱글 페이지 어플리케이션 - 페이지 전환 속도가 빠름 - 주소가 변경되어도 서버에 추가로 웹 문서를 요청하는 작업 필요❌ 단점) - 어플리케이션 규모가 커지면 자바스크립트 파일 또한 커짐 - 페이지 로딩 시, 사용자가 실제로 방문하지 않을 수도 있는 페이지 스크립트까지 불러옴 라우팅이란? - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 import React from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: Home, errorEleme..

8주차 수요일 13. Context Context - 어플리케이션에서 전반적으로 사용할 값을 관리 - 예) 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정 ➡ App.js function App() { return ; } function GrandParent({ value }) { return ; } function Parent({ value }) { return ; } function Child({ value }) { return ; } function Message({ value }) { return 전달받은 데이터 : {value}; } export default App; 길어 길어🤦‍♂️ 한번에 보내줄 수는 없지만, 새로운 영역을 생성해서 전달 가능! Context 사용 방법 1️⃣ Con..

새싹 프론트엔드 실무 과정 8주차 Hooks 8주차 월요일 11. Hooks - 1 useState() - 가장 기본적인 Hook - 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 줌 import React, { useState } from "react"; const AddName = () => { const [names, setNames] = useState(["간", "리액트"]); const [input, setInput] = useState(""); function InputChange(e) { setInput(e.target.value); } function uploadInput() { setNames([input]); } return ( 추가 {names.map((name, idx) =..