리액트의 발상 [상황] 인터랙션이 많고 동적 UI 표현이 필요합 웹 애플리케이션 ↓ [문제] DOM을 직접 건드리면서 작업하면 코드가 난잡해지기 쉬움 ↓ [해결] Ember, Backbone, AngularJS 등의 프레임워크 등장 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결 = 업데이트 작업 간소화 ↓ [문제] 애플리케이션의 규모가 크면 상당히 복잡해지고 제대로 관리하지 않을시 성능 저하 발생 ↓ [해결] React 라이브러리 등장 데이터에 변화가 있으면 기존에 있던 뷰를 날려버리고 새로 렌더링하는 방식 더보기 렌더링 사용자 화면에 뷰를 보여주는 것 ↓ [문제] 모든 것을 새로 만들면 속도와 성능 저하 ↓ [해결] Virtual DOM 사용 더보기 DOM (Document Obj..

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) => { if (res.ok) { setIsDone(!isDone); ..

더미 데이터 구현, map() 반복문 db폴더 생성 - data.json 파일 생성 데이터 - https://github.com/coding-angma/voca/blob/lesson/9/src/db/data.json @ DayList 컴포넌트 생성 day 개수만큼 를 만들어줘야 함 -> map 사용 import dummy from "../db/data.json"; export default function DayList() { console.log(dummy); return ( {dummy.days.map((day) => ( Day {day.day} ))} ); } 이 상태에서 console을 보면 경고문이 뜸 Warning: Each child in a list should have a unique "..

이벤트 처리 1. 미리 함수로 만들어서 전달 onClick={함수명} 문자열이 아니기 때문에 중괄호 사용 // Hello.js export default function Hello() { function showName() { console.log("Mike"); } return ( Hello show name show age ); } 만일 showName()과 같이 함수 뒤에 ()을 붙여주면 함수가 반환하는 값이 들어감 현재는 반환값이 없으니 undefined 2. onClick 내부에 직접 함수 작성 { console.log(30); }} > show age 이 방법의 장점은 매개변수를 전달하기가 편하다는 점 export default function Hello() { function showAge(..

설치(create-react-app) npx create-react-app [프로젝트명] * 강의에서는 npx create-react-app voca npx는 npm에 올라가있는 패키지를 바로 실행해서 설치시켜주는 도구 npm start 웹브라우저 열기 node_modules 프로젝트를 실행할 때 사용되는 dependency 모듈이 모아져있는 폴더 이 폴더에 설치된 모듈들은 모두 package.json파일에 기록되어 있음 따라서 node_modules를 지우더라도 package.json가 있는 상태에서 npm install만 해주면 다시 설치 가능 깃허브에 올리지 않는 폴더 package.json이 있으므로 다른 개발자도 동일한 환경을 구축할 수 있음 Hot Module Replacement (HMR) ..

📌 아래 강의의 내용을 정리한 글입니다. 노마드 코더 - ReactJS로 영화 웹 서비스 만들기 1. 리액트의 규칙 中 1 HTML을 직접 작성하지 않는다! 대신 자바스크립트 코드를 사용 span이든 button이든 무언가를 만들기 위해 js와 리액트를 이용해 element를 생성 리액트 JS의 기초를 배울 수 있는 어려운 방식(사용하지 않음) body안에 어떻게 리액트 element를 가져다 두는가? → 리액트가 HTML을 생성! → 리액트 DOM 사용 필요 리액트는 어플리케이션을 인터렉티브하게 만들어주는 라이브러리 → 엔진과 같음, 인터렉티브한 UI를 만들 수 있게 해줌 리액트 돔은 리액트 엘리먼트들을 HTML body에 둘 수 있게 해주는 라이브러리 혹은 패키지 → 리액트 엘리먼트를 HTML에 두는..