분류 전체보기

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 화살표 함수를 사용하면 이 문제를 해결할 수 있습니다. 화살표 함수는 함수 정의를 감싸는데, 버튼을 클릭할 때만 함수가 호..

참고자료 https://velog.io/@edie_ko/React-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-API-key-%EC%88%A8%EA%B8%B0%EA%B8%B0.env-%EC%9D%B4%EC%9A%A9 React | 환경변수 사용하여 API key 숨기기(.env 이용) 리액트 프로젝트를 하면서 API key를 발급받아 사용하는 일이 잦다.카카오 developer 혹은 google developer와 같은 API key들은본인의 고유한 key이므로 그냥 깃헙에 올리면 안된다.React CRA 기반으로 작업을 velog.io

https://kkt102.tistory.com/69 [JavaScript]github.io(깃허브를 이용한 페이지)에 카카오맵 API 사용하기 안녕하세요. 사진찍는 초보개발자입니다. 오늘은 간단하게 카카오 API를 이용하여 웹 페이지에 카카오 맵을 띄우는 방법을 소개하겠습니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용 kkt102.tistory.com