리액트4 한 입 크기~ 리액트 todo 1. 구현 조건구현 화면은 위와 같음Todo 추가/체크/삭제/검색 기능 2. UI 구현component 나누기 (Header, Editor, List/TodoItem )3개의 component로 나눔HeaderEditorList기본 레이아웃 설정App.cssbox-size: border-box;margin: 0 auto; 가운데 정렬display: flex; flex-direction: column;.App { border: 1px solid gray; box-sizing: border-box; max-width: 500px; width: 100%; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap:30px.. 리액트 2024. 6. 17. 코딩앙마 VOCA 1. 2. PUT(수정)아는 단어인지 체크하는 부분은 상태를 유지하는 게 좋음 -> PUT메소드를 이용하여 단어의 isDone필드를 수정하자 // Words.js...function toggleDone() { fetch(`http://localhost:3001/words/${word.id}`, { method: "PUT", headers: { "Content-Type": "application/json", // 보내는 리소스의 타입 (html, 이미지 등) }, body: JSON.stringify({ // body에는 수정을 위한 정보들, JSON문자열로 변환 ...word, isDone: !isDone, }), }).then((res) => .. 리액트 2024. 6. 17. 리액트/JS 뮤직 앱 리액트 버전자바스크립트 버전https://www.youtube.com/watch?v=G88qF9JNNi0&t=0s 리액트 2023. 1. 5. 코딩애플 리액트 part1 (11/9~) 강의 목차# Part 1 : 블로그 제작 & 기초 문법React 배우기 전에 쓰는 이유부터 알아야리액트 React 설치와 개발환경 셋팅 (2022 ver)리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개중요한 데이터는 변수말고 state에 담습니다버튼에 기능개발을 해보자 & 리액트 state변경하는 법array, object state 변경하는 법Component : 많은 div들을 한 단어로 줄이고 싶으면리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때자식이 부모의 state 가져다쓰고 싶을 때는 propsprops를 응용한 상세페이지 만들기input 1 : 사용자가 입력한 글 다루기input 다루기 2 : 블로그 글발행 기능 만들기.. 리액트 2022. 11. 11. 이전 1 다음