게으른 나에게

useRef[.current 프로퍼티로 전달된 인자(initialValue)로, 초기화된 변경 가능한 ref 객체를 반환.반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됨]순수 자바스크립트 객체를 반환 (.current라는 프로퍼티)이 프로퍼티는 useRef를 실행할 때 전달한 초깃값이 구성되어 있다는 의미매번 렌더링 할 때 동일한 ref 객체를 제공한다는 점리렌더링 할 때 재선언되는 문제 해결 가능값이 변경되더라도 컴포넌트 리렌더링 일어나지 않음리액트에서 DOM에 직접 접근할 때 사용 import { useRef } from 'react';const fakeId = useRef(0);const handleCreate = (newProduct: Omit) => { fakeId.current += 1; ..

CORS (Cross-Origin Resource Sharing)교차 출처 리소스 공유브라우저에서 발생하는 오류 출처(Origin)URL에서 프로토콜(Protocol), 도메인 이름(Domain Name), 포트(Port)          ->      "출처" =>  이것이 다르면 CORS 오류  다른 출처간의 통신을 막아놓은 이유는 보안 때문  해결 방법1. 프론트엔드에서 해결하는 방법Proxy 서버 설정 브라우저와 서버간의 통신에서 출처 교차브라우저에서 요청 -> 바로 백엔드 요청 보내는 것 X브라우저에서 요청 -> 현재 프론트엔드 서버에서 요청 O프론트엔드 서버 -> 백엔드 서버 요청package.json에서 수정"proxy": "백엔드 서버"fetch(도메인이 생략된 형태)fetch('/')  ..

fetch('API주소').then((response) => response.json()).then((data) => console.log(data)); fetch함수Response 객체로 데이터를 가져옴.실제 필요한 json 본문 데이터를 추출해주기 위해 json( ) 메서드를 사용해 변환 필요.Promise비동기 작업이 완료, 실패 했을 때 처리하기 위한 객체.자바스크립트에 기본적으로 내장되어 있는 객체.'대기' '이행' '거부' 상태로 표현 fetch 함수Promise 인스턴스(then, catch, finally) then 메서드Promise 상태가 이행, 거부 상태가 되었을 때 실행. => 비동기 작업이 처리되었을 때 실행 동기화를 하는 시점은 데이터를 불러오는 데 성공했을 때fetch('/pr..

function Todos (props) { return( );}여기 있는 상수 Todos가 리액트 함수 컴포넌트를 가지고 있음.상수 Todos에 타입 지정.react에서 React 가져오기.'.FC' 추가. (리액트 패키지'@types/react'에 정의된 타입) => 이 자체가 제네릭 타입리액트 패키지에 내장된 타입 정의.이 함수가 함수형 컴포넌트로 동작함을 명시. import React from 'react';const Todos: React.FC = (props) => { return( );}  React.FC에 정의된 타입 T.제네릭 타입을 사용해 FC라는 제네릭 타입의 용도에 맞게 사용할 하나의 타입을 명시적으로 설정.FC은 제네릭 타입. 여기에 집어넣을 값..

React 프로젝트가 TypeScript 사용하도록 설정해야 함.Create-React-App(CRA) 사용. 1. create react app 검색2. 'Create React App Docs' 문서 페이지https://create-react-app.dev/docs/getting-started/ Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-react-app.devCreate-React-App 사용법, 타입스크립트와 통합하는 방법 ... 등등 3. Building your App(앱 빌드) 선택 -> Adding TypeScripthttps:..

JSX 표현식은 하나의 상위, 부모 요소를 가지고 있어야 함. 형제요소만을 반환하면 오류 생김.return문 : 이 모든 값을 감싸는 객체 혹은 배열But DOM에 중복되는 요소가 생김. =>      fragmentroot 컴포넌트가 필요한 경우, 형제 컴포넌트 감싸는 용도 사용 가능(화면상으로 보이는 실제 요소 렌더링 x)import { useState, Fragment } from 'react';function App () { return ( . . . );} 최근에는import { useState } from 'react';function App () { return ( . . . );}

리액트 Hooks리액트 프로젝트에서 'use'로 시작하는 모든 함수.일반 함수이지만 리액트 컴포넌트 함수 or 다른 리액트 Hook 안에서 호출되어야 함.컴포넌트 함수 안에서, 최상위에서 바로 호출.다른 코드 안(내부 함수 안)에서 중첩 X.if문, loop X. 리액트에서 처리되는 변수를 등록하는 것.리액트가 제공하는 함수의 도움을 받아 업데이트 됨.리액트에게 데이터가 변한 것을 알려주면 리액트가 UI를 업데이트.=> 이 특별한 변수들은리액트 라이브러리에서 불러와야 하는 특별한 함수의 도움으로 생성 useStateimport { useState } from 'react'; 인수를 받아들이는데 기본적으로 컴포넌트가 처음 렌더링될 ,때 리액트가 저장하고 사용하길 원하는 기본값.반환되는 값(배열) -> 변수..

컴포넌트재사용이 가능한 구성요소컴포넌트 결합해서 만들어지는 것 = ReactHTML + CSS + JS = React Component복잡한 사용자 인터페이스를 관리하기 쉽도록 작게 분리해 UI 다른 위치에 사용할 수 있음react에서 컴포넌트로 인식하기 위한 2가지 규칙1. 함수의 제목은 대문자로 시작2. 함수에서 렌더링 가능한 값 반환 컴포넌트 생성 및 활용컴포넌트 정의-js 함수 작성, 함수의 제목은 대문자-새로 생성된 헤더 함수에 값이 반환되어야 함 -> 반환된 값, return (컴포넌트 통해 화면에 보여지는 내용)function Content() { return ( 화면에 보여질 코드 (html) );}컴포넌트 사용 function App() { return ( );} props데이터 -..

1. node.js 설치https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org -설치 확인node -vnpm -v  2. 작업폴더 생성 (보통 영어 작성, 특수문자 언더바(_)와 하이픈(-)만 사용)vscode에서 폴더를 열어서 시작  3. 프로젝트 생성-터미널sudo npx create-react-app 프로젝트명npx create-react-app 프로젝트명  4. 실행npm start