코딩/React (2) 썸네일형 리스트형 리액트로 Todo list 만들기 / 기본편 1 (입력, 삭제) 요구사항 Input 창에 값이 입력될 수 있도록 한다. 입력된 값을 추가 버튼 클릭으로 하단에 보여줄 수 있게 한다. 입력받은 todo 값을 삭제할 수 있도록 한다. 추가 ) input창에 Enter 키 입력으로 입력된 값이 바로 출력될 수 있게 한다. 기본 UI 구현 TodoList.jsx 컴포넌트와 TodoItem.jsx 컴포넌트를 생성한다. TodoList.jsx const TodoList = () => { return ( 오늘의 할 일 추가 할일 목록 ); }; export default TodoList; TodoItem.jsx const TodoItem = ( ) => { // 인라인 스타일로 간단하게 UI 정리 return ( 오늘의 할 일 삭제 ); }; export default TodoI.. react-router사용과 v6에서의 switch의 변화 Lama Dev의 MERN stack 을 이용한 블로그 만들기를 학습하던 중, 블로그의 각 페이지(메뉴의 내부 페이지)를 라우팅할 수 있도록 react-router라이브러리를 이용하였다. 🎬 React Router 시작하기 프로젝트에서 리액트라우터 라이브러리를 설치한다 yarn add react-router-dom 프로젝트에서 라우터를 적용할 수 있도록 App.js에 요소들을 import해준다. import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; 라우팅하기 위해 만들어둔 페이지 컴포넌트를 요청 주소에 따라 연결될 수 있도록 Route 요소를 사용하여 연결한다. 😈 react-router의 업그레이드, v6에서의 switch 오류 .. 이전 1 다음
