React

리액트 공홈의 자습서를 보고 공부해봤다

리액트 공홈의 자습서를 보고 공부해봤다

요런 컴포넌트를 만들어서 리뷰를 넣어 이 페이지 저 페이지 재사용 해야 됨사진 - 산타비 - 태그들 간에 아무 관계 없음...이미지 위로 hover 했을 때 리뷰가 보이도록 구현해야 했다!react-icons아이콘을 바로 임포트 해 와서 쓸 수 있는 패키지. 왜 이제서

자바스크립트의 확장 문법코드가 브라우저에서 실행되기 전에 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨이처럼 JSX를 사용하면, HTML 코드를 작성하는 것과 비슷한 형태로 매우 편하게 UI를 렌더링할 수 있음을 알 수 있다!li 태그 두

디자이너분이 마이페이지 디자인을 위처럼 짜 주셔서 일단 고대로 퍼블리싱 해야 됐다 그래서 만들어야 했던 게 왼쪽에 있는 사이드바! 이 블로그를 참고해서 만들었다. react-router-dom 을 사용! Sidebar 컴포넌트 생성 // src/components/

함수형 컴포넌트비교적 선언하기 편함메모리 자원을 더 적게 사용함클래스형 컴포넌트state, 라이프사이클 API 사용 가능임의 메서드 정의 가능하지만 리액트 업데이트 이후 Hooks 도입으로 함수형 컴포넌트도 클래스형 컴포넌트처럼 사용할 수 있게 됐다...! (나중에 자

사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 이벤트라고 한다. 예를 들어 버튼에 커서를 올렸을 때는 onmouseover 이벤트, 클릭했을 때는 onclick, 폼 요소는 값일 바뀔 때 onchange 이벤트를 실행한다. 이벤트 종류는 여기(https&#

일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. (<div id="my-element"></div>) 그렇다면 리액트에서는 어떨까? 리액트에서도 id를 사용할 수는 있으나, 컴포넌트를 여러 번 사용하는 것과 같은 경우에는 중복 id를 가진

map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.arr.map(callback, \[thisArg])callback: 새로운 배열의 요소를 생성하는 함수thisArg(필수 X): cal

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작해서 페이지에서 사라질 때 끝난다. 가끔 컴포넌트를 처음으로 렌더링할 때나 컴포넌트가 업데이트될 때 어떤 작업을 처리해야 하는 경우가 있다. 이럴 때는 클래스

Hooks는 리액트 v16.8에 새로 도입된 기능으로 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다.

프로젝트에 자동으로 만들어지는 src/App.js, src/App.css를 가지고 다양한 컴포넌트 스타일링을 살펴보자.App.jsApp.cssCSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다.명명 규칙자동으로 생성되는 App.css를 살

CRA로 todo-app 프로젝트 생성필요한 라이브러리 설치Prettier 설정

10장에서 만들었던 todo-app에서 데이터가 폭증하면 앱이 느려지겠지? 성능 최적화 전에 실제로 랙(lag)을 경험할 수 있도록 많은 데이터를 렌더링해보자.App.js를 다음과 같이 수정해 데이터 2500개를 생성하는 함수를 통해 todos를 설정했다.주의useSt

전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 복잡하고 깊어질수록 불변성을 유지하며 컴포넌트를 업데이트 하는 것이 매우 힘들어진다. 이런 경우 사용할 수 있는 라이브러리로 immer라

기존 웹은 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 줬다. 하지만 요즘은 웹 상의 정보가 매우 많기 때문에 화면이 전환될 때마다 html을 계속 서버에 새로 요청하면 U

우선 외부 API를 호출하는 법을 알기 전에 동기 비동기에 대한 이해를 해보자.만약 작업들을 동기적으로 처리한다면, 한 작업이 끝날 때까지 기다렸다가 다른 작업을 시작한다. 하지만 비동기 방식은 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 과정에서 다른 함수도