REACT 보충개념

class 넣을 땐 className변수를 html에 넣을 땐 {변수명}// 중괄호 사용style 넣을 땐 style={{스타일명:'값'}}ex) <h4 style={{color : 'red', fontSize : '16px'}}// font-size라고 적으면

return()안에는 병렬로 태그 2개 이상 기입 금지state 사용법import { useState }useState(보관할 자료)let작명, 작명\-> let a, b = useState('여자 신발 추천');a = state에 보관했던 자료b = state 변경

/ eslint-disable/ warning ment 차단하는 명령어자주 바뀌는 것들을 state 사용하면 좋으니까좋아요 기능도 state사용 적합 !onClick이벤트는 함수를 따로 만든 후, onClick = {}안에 함수 이름을 넣어야 함함수를 직접 onClic

App.js/ eslint-disable/ // warning ment 차단하는 명령어import logo from './logo.svg';import './App.css';import { useState } from 'react';function Modal(){ r

App.js/ eslint-disable/ // warning ment 차단하는 명령어import logo from './logo.svg';import './App.css';import { useState } from 'react';// 자식 컴포넌트function A

< input >에 뭔가 입력시 코드 실행하고 싶으면?onChange / onInput이벤트 핸들러 종류 몇개 정리< input onMouseOver={}>\-> input 위에 마우스 올려두면 실행되는 이벤트 핸들러< input onScroll={}>

이미지를 css에서 불러와서 쓰는 방법이미지가 들어갈 태그에 className 설정 후,CSS에서 이미지 들어갈 높이 설정해주고, 나머지 CSS주면 됨이미지를 html에서 불러와서 쓰는 방법App.js 파일 상단에import 작명 from '이미지경로';근데 JS에서

컴포넌트 만들기function 작명( ){ return(html넣기)App function안에있어서 새로만든 컴포넌트 안에서 못불러올때는?보통 state명과 작명을 같은 이름으로 설정함그 다음 만들어놓은 컴포넌트에 가서파라미터로 props를 넣어주고,해당 state명을

styled- components 설치하기터미널에 npm install styled-components 입력해주기상단에 import해주기사용법원래는 style 주려면 clsaaName 설정 후 CSS가서 작업해줘야하는데, styled components 사용하면 js파

detail page 접속 후 2초 이내에 특정 메세지 사라지게 하기특정 메세지 : 2초 이내 구매시 할인alert를 띄워줄 곳에 삼항연산자를 적는다스위치같은 기능을 이용해서 코드를 작성하기 위해detail function안, return 전에 useState()를 선

페이지 여러개 만들고 싶다면? URL파라미터 써도 됨 > 이렇게 [현재 url에 입력한 숫자]를 넣어서 사용하고 싶은데 방법이 있을까? -> 있다 ! --> useParams() > useParams() : 유저가 URL 파라미터에 입력한 것 가져오려면 useP

AJAX 개념 설명 서버 : 부탁하면 진짜로 들어주는 프로그램 서버 개발시 짜는 코드 : '누가 A요청하면 A보내주세요' 서버 요청할 때의 규격 방법(GET/POST) 어떤 자료(URL) 적어 보내라 > AJAX 쓰려면? 옵션 3개 있음 XMLHttpRequest

AJAX 다시 정리서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능array와 object자료는 변경하기 전에 copy를 꼭 하자!여러개의 url사용하고 싶다면 아래처럼 사용하기fetch사용법탭 UI 만들기모

Context API props를 여러개 써줘야 하는 상황이 번거롭기 때문에 사용하는 API 셋팅 createContext() -Context는 state보관함이라고 생각하기

데이터 바인딩 실습 사용할 곳에 state 선언해주고, 원하는 데이터만 선택해서 보여줄 수 있음 ![](https://velog.velcdn.com/images/bee

Redux의 state 변경하는법state 수정해주는 함수 만들기원할 때 그 함수 실행해달라고 store.js에 요청하기state 수정해주는 함수만들기기존 slice 내부에 reducers : { } 사용해서 변경할 함수 넣어주기만든 함수 export 하기만든 함수는

버튼 누르면 state에 상품 추가 reducer에 새로운 수정함수 하나를 추가해주면 됨 그런데, 위와 같은 코드는 id가 2번인 상품 하나만 추가되는 코드 여러개를 추가하고 싶다면? -> payload 활용! -> payload활용한 수정함수 만들기 -> exp

React DevTools (크롬 확장 프로그램)크롬 웹스토어에서 React Developer Toolsd 설치하면개발중인 리액트 사이트를 컴포넌트로 미리 볼 수 있음크롬 웹스토어 : https://chrome.google.com/webstore/Profile

PWA: 웹사이트를 모바일 앱처럼 설치해서 쓸 수 있음설치 마케팅 비용 적음아날로그 유저들 배려html css js만으로 앱까지푸시알림, 센서 등PWA가 셋팅된 리액트 프로젝트 생성하기작업 폴더 열고 터미널에 아래 코드 입력해서 리액트 프로젝트 생성하기기존 프로젝트를

React, Angular, Vue, Svelte전부 html 예쁘게 만들어주는 틀연동할 Node 설치하는 법nodejs 검색해서 설치작업폴더 만들고 에디터로 오픈server.js 만들어서 코드 복붙\*\*\* 복붙할 코드에디터 터미널 열어서 npm init-y 입력n

React-query ajax 성공시/실패시 html 보여주려면? 몇초마다 자동으로 ajax 요청? 실패시 몇초 후 요청재시도? prefetch --> 위의 것들을 직접 하기 귀찮은 경우 React Query 사용하자 ! ---> 실시간 데이터를 계속 가져와야 하는

리액트 함수 컴포넌트에서 부수효과를 수행할 수 있게 해준ㄴ 기능부수효과 : 데이터 가져오기, 수동으로 DOM 변경하기, 타이머 설정하기 등사용법두개의 인자 받기1) 부수 효과 함수 (필수)2) 의존성 배열(선택)부수 효과 함수는 컴포넌트가 렌더링될 때마다 실행됨의존성

JavaScript에서 객체나 배열의 속성/요소를 쉽게 추출하여 변수에 할당할 수 있게 해줌간결한 코드를 만들 수 있음객체와 배열 모두 적용 가능많은 매개변수를 가지는 함수에서 유용함

JavaScript의 배열 메서드각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성하는 데 사용됨TypeScript에서도 자주 사용되고, 특히 컴포넌트 리스트를 렌더링할 때 유용UserItem이라는 별도의 컴포넌트를 정의하여 사용자를 렌더링함UserList 컴포

상태관리useState를 실행시키면 return값으로 array( counter, setCounter )를 주는데,첫번째 item(=counter)이 상태, 두번째 item(setCounter)이 상태를 업데이트 해주는 함수임useState()안에 들어가는 것은 초기값

State : 컴포넌트의 상태 useState 컴포넌트의 상태를 간편하게 생성하고 업데이트 시킬 수 있는 도구를 제공해 줌 state : 현재 상태 값 setState : state를 변경 시켜 주고 싶을 때 이용 state, setState의 이름은 변경 가능

어떤 컴포넌트가 Mount(화면에 첫 렌더링), Update(다시 렌더링), Unmount(화면에서 사라짐) 되었을 때 특정 작업을 처리한 코드를 실행시키고 싶을 때 사용인자로 콜백함수를 받음콜백함수 내부에 원하는 작업을 처리할 코드를 입력해주면 됨다른 함수의 인자로

함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환해줌ref 오브젝트는 { current: value } 이렇게 생김인자로 넣어준 초기값이 ref 안에 있는 current에 저장이 됨ref 오브젝트는 수정이 가능해서 언제든 원하는 값으로 변경 가능반환된 r

각각의 React 컴포넌트 파일에서 동일한 이름의 state를 사용해도 괜찮을까? YES. 각 컴포넌트는 독립적인 스코프를 가지고 있어서 각 컴포넌트 내에서만 유효함 따라서 사용 가능 > 두 컴포넌트 간에 state를 공유해야 하는 경우라면? 상위 컴포넌트에서

접근하고자 하는 태그의 ref 속성으로 넣어주기만 하면 쉽게 해당 요소에 접근 가능대표적인 usecase로 textbox같은 input 요소에 focus를 줄 때 많이 사용됨로그인 페이지가 로딩되어서 화면에 보여졌을 때 id를 넣는 공간을 굳이 클릭하지 않아도 자동적으

useContext context로 받아온 데이터를 쉽게 받아볼 수 있게 도와주는 역할을 함 리액트로 만든 앱은 여러 개의 컴포넌트 들로 이루어져 있음 최상위 앱에서 시작해서 트리형태로 뻗어나감 부모 컴포넌트 -> 자식 컴포넌트로 Props를 통해 전달됨 이렇게

useMemo, useCallback이 있음useMemo에서 Memo는 Memoization을 의미함동일한 값을 리턴하는 함수를 반복적으로 호출해야 한다면 맨 처음 값을 계산할 때 해당 값에 메모리에 저장해서 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용

Memoization 기법으로 컴포넌트를 최적화 시켜주는 기법어떠한 자주 사용되는 값을 받아오기 위해 반복적으로 계산을 해야 한다면 이전에 이미 계산한 값을 캐싱해둠으로해당 값이 필요할때마다 반복적으로 계산하는게 아니라 메모리에서 꺼내서 재사용하는 최적화 기법useMe

useReducer useState처럼 State를 생성하고 관리할 수 있게 해주는 도구 여러개의 하위 값을 포함하는 복잡한 State를 다뤄야 할 때 useState 대신 useReducer를 사용하면 훨씬 간결하게 코드 작성 가능 유지보수도 편해짐 Reducer,

React는 성능이 좋기 때문에 컴포넌트의 렌더링 횟수에 대해 크게 고민할 필요는 없음하지만 렌더링이 너무 자주 발생해서 성능에 부담을 준다면 불필요한 렌더링은 최대한 막는게 좋음이름, 나이 , 주소를 props로 전달받아 다른 학생의 정보를 보여주는 컴포넌트Stude

원하는대로 커스텀해서 만드는 React Hook원하는 이름을 지어주기원하는 기능을 함수안에 구현하기매개변수, return값도 마음대로 정할 수 있음Custuom Hook 내부에서 다른 React Hook을 사용할 수 있음사용하는 컴포넌트마다 커스텀 훅이 가지는 Stat

실제 코드 구현 2 : useFetch Custom Hook 만들기 네트워크상에서 데이터를 가져올때, JavaScript의 fetch API를 많이 사용함 fetch API를 통해 네트워크상에서 데이터를 가져오는 기능을 해주는 커스텀 훅인 useFetch 만들어보기

useId 고유한 아이디를 만들 때 사용하는 React Hook 사용방법 : import 후 호출해서 사용 아무런 인자도 전달받지 않기 때문에 호출하면 문자열 형태의 아이디를 하나 반환함 useId로 만든 ID는 input같은 form요소에 접근성에 관련된 속성을 제

자주 사용하지는 않지만 알아두면 유리함useEffect와 비슷하고 사용하는 방법도 동일함첫 번째 인자로 effect라는 콜백함수를 전달받고, 두 번째 인자로 의존성 배열을 전달받음useEffect, useLayoutEffect 모두 컴포넌트가 처음 렌더링 될 때, 의존

너무 자주 호출되는 함수로 인해 문제가 발생하는 경우가 있음특히 특정 이벤트의 반응에서 함수를 호출해야 할 때 이벤트가 극단적으로 많이 발생하면 문제가 발생함그렇게 되면 성능 저하, 많은 서버 비용 유발이 발생됨\- 해결방법 -> Debounce(디바운스), Throt

부모 컴포넌트에서 자녀 컴포넌트로 Ref를 전달할 때 사용하는 기법특히 부모 컴포넌트가 자녀 컴포넌트의 DOM요소를 접근해야 할 때 유용하게 사용됨버튼을 클릭하면 input에 focus를 주고싶다면?컴포넌트 안에 ref를 만들고 input 태그 안에 ref 속성을 넣어

React 컴포넌트들은 여러개의 element들을 return함element들은 반드시 단 하나의 최상위 태그로 묶여있어야 함보통 div태그 사용React.Fragment를 사용하면 실제 DOM에 별도의 NODE를 추가하지 않고도 element들을 묶어줄 수 있음Fra

React는 가상 DOM을 사용해서 우리가 원하는 페이지를 빠르게 브라우저에 그려줌실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하기이 복사본은 실제 DOM이 아닌 JavaScript의 객체형태로 메모리 안에 저장되어있음실제 DOM 안에 있는 모든 element

React에서 List 형태로 여러 element들을 반환할때는 각각의 element마다 고유한 key값을 넣어줘야 함List 내부의 각각 element의 key값은 안정적이고 고유한 값이어야 함위 처럼 코드를 작성하면 key를 추가해달라고 경고가 발생함key를 추가하

온라인 게임에서 스킬 = 함수 라고 생각하기함수가 너무 자주 호출될때 그 횟수를 제한하는 기술만약 무거운 작업을 하는 함수라면 상당한 CPU 사용 혹은 서버 비용이 발생함\-> 자원 방지를 위해서 지나치게 자주 호출되는 것을 방지할 필요가 있음즉, 쓰로틀링은 함수가 한

만약 element마다 공통 컴포넌트인 Navbar, Footer을 다 추가해야 한다면 비효율적임react-router-dom의 Outlet기능 사용하기React Router Dom의 Outlet 컴포넌트는 중첩 라우팅을 구현하는 데 매우 유용한 도구임Outlet은 부

npm 명령어만약 전역으로 설치하고 싶다면 App.js에 style.scss import해주기기본 개념웹 페이지의 스타일링을 정의하는 기본 스타일시트 언어브라우저가 직접 해석하고 실행CSS의 확장 언어로, 더 강력하고 효율적인 스타일 작성을 지원CSS로 컴파일되어야 브

필수 입력 필드 지정 : 해당 입력 필드가 반드시 채워져야 함을 나타냄폼 제출 제어 : 사용자가 필수 필드를 비워둔 채 폼을 제출하려고 하면, 브라우저가 자동으로 제출을 막고 사용자에게 필드를 채우도록 요청함유효성 검사 : 브라우저의 기본 유효성 검사 기능을 활용하여