# React
리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.
Spead연산자로 추가한 JSON 형태 배열 정렬
JSON 형태의 값 안에 새 객체를 추가하고 싶을 때, 주로 다음과 같은 형식을 사용하게된다.새로운 배열을 생성하여 기존의 값(객체)들을 스프레드 연산자로 모두 넣고, 추가로 새로운 객체를 추가하는 방식이다.이 방법은 새 객체가 스프레스 연산자가의 앞에 오느냐 뒤에오느
Adding interactivity- State:Component's memory
Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory
Adding interactivity
두서말: 리액트 공식문서가 완전히 새로 업데이트가 되어서 기본도 다시 복습할겸 새로운 공식문서를 읽어가던중 까먹었거나 새로 알게된 내용들을 정리해 적어 본다. 일단 오늘 챕터는 Adding interactivity부터 시작하기로... Responding to Even
[React] async onClick에서 useState set함수 안되는 현상 (axios get loading 구현)
이론 공부할 수록 생각이 넓어지는 기분이에요!
[웹 게임을 만들며 배우는 React] 숫자야구 (props, import & require, 성능 문제 해결)
\-> 2개 모두, export된 컴포넌트를 불러오기 위한 문법이라는 점은 같다. \-> 'module.export'로 내보낸 것을 불러올 때 사용!\-> 'export default'로 내보낸 것을 불러올 때 사용!export와 export default의 차이: e
[프론트]MUI Carousel 라이브러리 사용해 구현
여러 개 이미지를 편하게 볼 수 있게 해야 한다=> 오른쪽 혹은 왼쪽 버튼을 누르면 다음 이미지로 이동할 수 있게 한다여러 개의 이미지를 Carousel 태그로 감싸준다Paper import 하기보여주기를 원하는 사진을 Paper 태그로 감싸준다반복되는 코드 map 메
프론트엔드 생존코스 2기 3주차 회고
React 몇번 공부 해봤다고 생각했는데 아니었나보다 ㅠㅠ 좀 더 깊이있게 공부해야 할 필요성을 느꼈고, 기초가 많이 부족하다는 것을 알 수 있었다. 매주 같은 생각을 하는 것 같은데 조금씩 발전이 있는거겠지..😰이번 주차는 React와 React State에 대해서
[React] 자식 컴포넌트에서 함수 끌어올리기가 안 될 때, 두 번씩 함수가 불러질 때
모달을 만드는 와중에 에러가 났다 상황 ❗ 자식컴포넌트에서 버튼을 클릭하면, 부모컴포넌트에 있는 함수가 실행되게 하고 싶다. 이렇게 props 이름 다 맞춰도 함수가 두 번씩 is not function 에러를 내뿜을 때 SOLUTION ✅ 부모 컴포넌트에서 화
URL 파라미터
URL 파라미터 사용하면 됨 (여러개 사용 가능 ex\_ /detail/:id/:aaa/:bbb)'/detail/:id':id가 URL 파라미터임 ( id는 예시 작명은 자유 )useParams()<출처>"React 리액트 기초부터 쇼핑몰 프로젝트까지!".코딩애플
라우터로 페이지 나누기
html 파일 만들어서 상세페이지 내용 채움/경로로 접속하면 html 파일 보내줌컴포넌트 만들어서 상세페이지내용 채움/경로 접속하면 그 컴포넌트 보여줌터미널에 npm install react-router-dom@6 입력해서 설치index.js파일에서 import { B
React - useCallback
리액트를 사용하면서 useState, useEffect, useRef등은 써보았지만 아직 제대로 사용해보지 못한 훅들이 많았다...그래서 이 참에 한 번 궁금했던 리액트의 hook몇 가지에 대해 알아보고자 한다.그 첫번째는 바로 useCallback이 되시겠다!컴포넌가
[React] React Router로 페이지 전환
Routing이란? 공식 문서에 따르면 Routing은 다음과 같다. > Routing은 웹 URL을 웹 어플리케이션 내의 특정 리소스에 바인딩 해주는 것이다. React에서 Routing은 URL을 Component와 바인딩해준다. 즉, Routing은 사용자가 요청
AWS BACK DAY 57. React - 2
git 설치 git 다운로드 링크 
[React] 컴포넌트 내 Ajax 요청
<데이터 파일>1\. 컴포넌트 내에서 필터링처음 단 한번, 외부 API로부터 목록을 받아오고 filter 함수를 이용한다.2\. 컴포넌트 외부에서 필터링검색어가 바뀔 때마다, 외부 API를 호출한다 (useEffect 사용)두 방식의 차이점1\. 컴포넌트 내부에서
[React] forwardRef 사용법, typescript 사용 시 발생하는 에러
React에서 ref prop은 HTML 엘리먼트에 직접 접근하기 위해서 사용된다. forwardRef 함수 컴포넌트는 ref가 존재하지 않기 때문에 ref 속성을 사용할 수 없다. 따라서 커스텀 컴포넌트에서 ref를 통한 직접 제어가 불가능하다. 이럴 때 Reac
[warning] Array.prototype.map() expects a return value from arrow function.
Array.prototype.map() expects a return value from arrow function.개발 도중 다음과 같은 경고가 발생했다.map 함수 사용 시 return 구문이 없어서 발생한 경고였다.위 경고는 아래 방법으로 해결이 가능했다.상황에