코딩앙마 React js 강좌

출처 create-react-app functional component JSX React Hook(like useState, useEffect) CRUD JSON-Server Rest API(POST, PUT, DELETE) node js와 vs code가 필요하

출처npx create-react-app 프로젝트명npm startHot Module Replacement(HMR)명령어

출처 컴포넌트 모든 컴포넌트는 대문자로 시작해야 한다. JSX(JavaScript XML)

출처

출처

이벤트 처리하는 방법showAge(age) age라는 매개변수 전달위의 onChange에서는 showText라는 함수가 들어간다.대신 이렇게 쓸 수도 있다.함수를 바로 작성해버리는 것이다.또 이렇게 쓸 수도 있다.전달해주는 것이다.

버튼을 누르면 robyn에서 robin으로, robin에서 robyn으로 바뀌게 하려고 한다.바닐라 자바스크립트였다면 다음과 같이 했을 것이다.리액트에서는 상태값 관리를 위해 useState를 사용할 수 있다.첫번째 name은 변수명이라고 생각하면 된다. 두번째 set

propsproperties속성값App.jsHello.js콘솔Hello.js브라우저이 값은 컴포넌트 내부에서 변경할 수 없다. 넘겨받은 그대로 사용해야 한다.만약 컴포넌트 내부에서 변경하고싶다면 state를 만들어야한다.버튼을 누를 때마다 나이가 한 살씩 올라가도록 하

db 폴더의 data.json에 다음과 같은 data를 넣는다.component 폴더의 DayList.js에 다음과 같이 작성한다.map() 반복문을 쓴다.그리고 App.js에 다음과 같이 추가해준다.그럼 브라우저에 다음과 같은 게 나온다.component 폴더의 Da

공부 출처라우터 구현을 위해 react router dom을 설치해야한다.터미널에 다음과 같이 입력한다.App.js에 가서 BrowserRouter, Route, Switch 이렇게 세 개를 import한다.우선 App 전체를 BrowserRouter로 감싸준다.Hea

json server는 빠르고 쉽게 rest api를 구축해준다.npm install -g json-server는 Node Package Manager (NPM)을 사용하여 json-server라는 패키지를 전역으로(global) 설치하라는 명령어입니다.json-ser

useEffect Hook은 두 개의 인자를 받습니다. 첫 번째 인자는 실행할 콜백 함수이고, 두 번째 인자는 의존성 배열(Dependency Array)입니다. 의존성 배열은 콜백 함수가 의존하는 값의 목록을 나타내며, 이 값이 변경될 때마다 콜백 함수가 실행됩니다.

이 코드는 toggleDone 함수를 정의하고 있습니다. 이 함수는 API에 PUT 요청을 보내어 word 객체의 isDone 속성을 반전시키고, 해당 요청이 성공적으로 처리되면 해당 상태를 업데이트하는 역할을 합니다.fetch 함수를 사용하여 API 요청을 보내며,