![]()
https://velog.io/@eunjin/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B7%B8%EB%9E%98%ED%94%84%EC%B0%A8%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%AA%A8%EC%9D%8C [React] 리액트 그래프/차트 라이브러리 모음 기업협업 프로젝트에서 다양한 차트 라이브러리를 사용해야 해서 직접 사용해 본 라이브러리나 리액트 개발자들 사이에서 유명한 라이브러리를 모아 보았다. https://nivo.rocksNivo.rocks커스텀 끝판 velog.io
![]()
깃허브 호스팅을 이용한 리액트 배포 방법은 아래 5가지 과정으로 이루어 진다. 1. package.json 파일 수정 package.json 파일 최하단(중괄호{} 안에)에 아래 코드를 삽입한다. "homepage": "https://깃허브아이디.github.io/레포지토리명" 삽입 후 package.json 코드 예시 // homepage 삽입 후 package.json 코드 예시 { "name": "for-mj", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.9", "@mui/materi..
![]()
useRef가 뭐임? useRef는 React에서 DOM 요소나 다른 React 요소에 접근할 때 사용하는 Hook 이다. useRef를 사용하면 DOM 요소에 직접 접근하거나 React 요소에 참조를 할당할 수 있다. useRef 특징 1. useRef 훅에서 주로 cuurent 속성을 사용한다. 2. current 속성은 실제 DOM 요소나 React 컴포넌트 인스턴스를 가리킨다. 3. useRef를 호출할 때 인자로 넘긴 값은 참조의 current 속성의 초기값으로 설정됩니다. 어떻게 씀? import React, { useRef, useEffect } from 'react'; function MyComponent() { const [value, setValue] = useState(null); /..
![]()
export default React.memo(컴포넌트 이름); React.memo를 이용하면 컴포넌트의 props가 변경되지 않으면 리렌더링을 하지 않는다
![]()
컴포너느는 다음과 같은 상황에서 리렌더링이 발생한다. 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceUpdate 함수가 실행될 때
![]()
What useState에 함수를 전달할 때 괄호()를 빼는 이유 How 2500개의 객체를 담은 배열을 반환하는 createBulkTodos() 함수가 있다고 가정하자. function createBulkTodos(){ const array=[]; for(let i =1; i
![]()
Sendbird 가 뭐임? SendBird는 실시간 채팅 및 메시징 솔루션을 제공하는 기업 SendBird를 사용하면 모바일 앱, 웹 앱 및 기타 플랫폼에 실시간 채팅 및 메시징 기능을 쉽게 통합 삽가능 (대충 직접 개발 안 해서 편하다는 뜻) 어떻게 씀? [참고자료] https://sendbird.com/docs/chat/uikit/v3/react/introduction/send-first-message 1. npm으로 sendbird 설치 npm i @sendbird/uikit-react 2. DashBoard 생성 및 AppId 복사 https://dashboard.sendbird.com/A8929746-D85A-4ABB-B8DA-AF31661199E2/overview 3. App.js에 아래 코드..
![]()
What JavaScript에서 이벤트 핸들러에 함수와 인자를 함께 전달할 때 주의해야 하는 이유는 실행 시점과 스코프에 관련이 있다. 예를 들어, 다음과 같은 코드가 있다고 가정해보자 Click me Why 이 코드는 문제가 된다. 이유는 버튼이 렌더링될 때 Selected(index)가 즉시 호출되고, 해당 함수의 반환값이 onClick 이벤트 핸들러로 설정되기 때문이다. 렌더링 될 때 함수가 즉시 호출되면 버튼을 클릭하지 않아도 Selected(index)가 이미 실행되어 상태를 업데이트하거나 다른 작업을 수행할 수 있으므로 이는 의도하지 않은 동작으로 이어질 수 있다. How 화살표 함수를 사용하면 이 문제를 해결할 수 있습니다. 화살표 함수는 함수 정의를 감싸는데, 버튼을 클릭할 때만 함수가 호..
