React

CMD-> 원하는 폴더로 cd npx create-react-app 프로젝트이름vs code에서 열기cd 프로젝트이름 -> code .create-react-app을 사용할 때 필요한 module의 모음집package.json에 기록되어 있음이 폴더를 지우더라도 npm

라이브러리: 제어 권한=> 개발자프레임워크: 제어 권한=> 프레임워크커뮤니티가 크며, 다양한 라이브러리를 사용할 수 있다(meta) 모르는 것을 바로 찾아볼 수 있고, META라는 큰 스폰서가 존재하며 버전이 계속해서 나오기 때문에 업데이트가 되는 것.Component

간결한 코드가독성 향상 -> 버그 발견 쉬움높은 보완성xml/html{js코드} => 중괄호로 js 코드 사용xml/html이후 conditional Rendering에서 자세하게 포스팅 2\. class 대신 className으로 작성!

= virtual Dom으로 이동하는 것= Element 다시 생성해서 바꿔치기하는 것

❣ 어떤 속성값(데이터, props)을 입력으로 받아서 상태(state)에 따라 그에 맞는 element(Dom 출력됨)를 구성해주는 것.컴포넌트 이름은 항상 대문자로 시작할 것! Read-Only : 값 변경 불가, 모든 React Component는 Props를 직

코드가 간단한 것이 특징, Component를 함수 취급React.Component를 상속받아서 Component를 만드는 것 항상 대문자로 시작해야 한다! 소문자로 시작하면 domc 태그로 인식하기 때문 복잡한 화면을 여러 개의 컴포넌트로 나누어서 화면 구현 가능

state는 개발자가 정의하며 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함 state는 JacaScript의 객체이다. state는 직접 수정할 수 없으므로 setState 함수를 통해서 변경해야함Class 컴포넌트 개념에서 기억할 것이므로 이런 것

Class Componnet의 단점을 보완하기 위해 나타남 Class Component는 function Component에 비해 어려운 문법, 축소 방식, Reloading시 떨어지느 신뢰성, 최신 기술 적용에 불리함Class Componente는 Lifecycle

반복문, 조건문, 중첩된 함수 내에서는 불가 잘못된 Hook 사용법 일반적인 js에는 불가능! \*eslint-plugin-react-hooks: 리액트 훅을 잘 사용하고 있는 지 알려주는 패키지

🔸 중복되는 logic이 그대로 있는 경우(사용 안함) 🔸 중복되는 logic을 custom한 경우 🔸 custom hook 사용하기

DOM에서는 클릭 이벤트를 처리하는 함수를 DOM CLICK을 통해서 처리onClick(카멜 케이스)으로 나타나고, 함수 그대로 처리 bind => JS에서는 기본적으로 Class 함수들이 바인드 되지 않아서, this를 사용할 때 bind를 하지 않으면 global

(true는 아니지만 true로 여겨지는 값)(false는 아니지만 false라고 여겨지는 값)Element를 변수처럼 저장해서 다루고 사용하는 것 조건문을 코드 안에 집어 넣는 것If 문을 집어 넣는 것, &&연산자 사용&&연산자: 양쪽에 나오는 것이 모두 true여

같은 item을 순서대로 모아놓은 것, 배열(자바스크립트의 변수나 객체들을 하나로 묶어 놓은 것)각 개체나 아이템을 구분할 수 있는 고유한 값으로, 아이템들을 구분하기 위한 고유한 문자열 , 맵 함수 안에서는 key가 필요함!

텍스트 입력 뿐 아니라 사용자가 무언가를 선택해야 하는 모두, 사용자로부터 입력을 받기 위해 사용 값이 리액트의 통제를 받는 input form element,모든 데이터를 state에서 관리

가장 가까운 부모 컨포넌트의 state를 활요하는 것이 효율적state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 활용하는 경우하위 컴포넌트의 state를 공통 상위 컴포넌트로 올림!위의 코드에서 input을 다른 component로 분리시켜 보자

✔️ inline style > #### 1. 객체로 서술 2. 속성값이 string이면 따옴표 안에 적기 3. 객체로 서술하기 때문에 쉼표로 구분 4. 그냥 숫자값이면 그냥 적기 5. 속성은 camelCase로! ✔️ css 파일 활용 > #### 각 component에 특화된 css 파일을 작성 (=파일명.module.css) 동일한 부분이더라도,...

매개 변수를 전달하기 편함!

속성값이 변하면, react는 자동으로 ui를 업데이트함! 따라서 화면을 다시 그려주지 않아도 됨.useState('초기값'), 동일한 컴포넌트라도 state는 각각 관리됨

또는age 값을 변경하고 싶다면 component내부에서 state를 다시 만들어야 함!넘겨 받은 값이므로... 화면에 어떤 data 갱신은 props, state로 처리!Hello 컴포넌트 내에서는 name은 stateUserName 컴포넌트 내에서는 props 이때

반환되는 배열의 요소는 jsx로 작성dummy의 days 리스트를 map으로 적용map은 props를 day로 받음dummy days를 day로 받고 그 day들의 id를 key(days 의 id->day의 id),day의 day를 <li>Day {day.day}

npm install react-router-dom 을 이용하여 router 설치App.js에서 import {BrowserRouter, Route, Switch} from 'react-router-dom'; App.js에서 return이후 전체를 <Browser

Day.js에서, word와 관련된 부분이 길어지므로 이를 Word 컴포넌트로 분리빠르고 쉽게 REST API를 구축해줌공부 목적이나 프로토타입, 작은 프로젝트 등에서 사용됨npm install -g json-serverjson-server --watch 경로 --po

상태값이 바뀌었을 때 동작하는 함수를 작성상태값이 변경되서 다시 렌더링되었을 때 호출 그러나 원하지 않은 상황에서도 호출될 수 있음-> 불필요한 실행 따라서 두번째 매개변수 변경되는 값 이 변경되는 경우에만 함수가 실행됨.useEffect(함수, 변경되는 값);최초의

hooks 폴더 생성use이름.js쓸 수 있도록 parameter 등으로 받아 주기수정사항은 만들어놨던 Custom Hook만 사용바뀔 수 있는 것: api 주소, 따라서 para로 받고 fetch에도 바꾸어줌의존성 배열도 바뀔 수 있으므로 url로 입력useState

입력하면, 유지되도록 하는 예제 fetch를 사용하여 url 불러오기 사용하는 method : 'PUT'header에 보내는 resource의 type 입력 ("Content-Type": "application/json")body에 상태를 어떻게 변화시킬 것인지 써줌이

입력받는 <form> 태그 이용! 앞서 만들어 두었던 useFetch()를 활용하여, day의 data를 불러옴각 day들을 선택하는 형태로 다시 나열해야 하므로, 즉 형태만 변환! => map함수 사용event가 생겨도 새로 고침을 하지 않도록, preventD

day, eng, kor는 입력받고 isDone을 false를 기본으로 저장할 예정여기서,전달할 body에 각 전달 값을 넣어줌useHistory()는 react-router에서 제공하는 기능const history= useHistory();history.push(원하

느린 인터넷 환경 TEST 가능느린 인터넷 환경에서 접속하면, 사용자가 기다리지 못하고 화면을 빠져나갈 수 있으므로 확인해야 함 : 초기값에 맞춰서!const \[data, setData] =useState(\[]); 초기값이 빈 배열따라서, 초기값이면, 로딩중이라는