React 마카로그

React

React Tooltip 만들어보기 툴팁 요소 선정툴팁을 토글하기 위해 요소를 선택할 필요가 있었다.첫 번째로 생각한건 useRef를 사용하여 요소를 선택하는 것이였는데 useRef를 사용하기 위해 툴팁이 필요한 요소에 모두 ref 속성을 넣어주기는 사용하기도 불편했고 ref 값에 배열로 만들어 처리하는 것도 그렇게 크게 좋은 것 같지 않았다.그래서 선택한 방법은 태그 속성으로 data-to

19 days ago

7 min read

React 배열 다루기 (기초)1. 가상의 데이터 타입 정의data.d.tsinterface Survey { ASK_SQ: number; ASK_CN: string; ANSWER_LIST: { ANSWER_SQ: number; ANSWER_CN: string; }[]; ANSWER: null | string | number; };2. 가상의 데이터 정의d

19 days ago

4 min read

React Recoil로 상태관리 방법 모듈 설치npm i recoilRecoilRoot 지정recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다.루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소다.index.tsimport ReactDOM from "react-dom/client"; import { RecoilRoot } from "re

19 days ago

3 min read

React 카카오 로그인 1. 초기 설정kakao developers 홈페이지 접속 후 로그인 (kakao developers link)상단 메뉴 -> 내 애플리케이션 진입 후 애플리케이션 추가하기 선택애플리케이션 추가 모달 화면애플리케이션 내용을 입력한 후 저장좌측 메뉴에서 제품 설정 -> 카카오 로그인 클릭 후 카카오 로그인 활성화아래 동의항목에서 로그인 시 필요한

19 days ago

3 min read

React 전역 State 사용 (zustand)설치yarn add zustand설정import { create } from 'zustand'; const useStore = create()((set => ({ num: 0, dispatch: (payload) => set(() => ({ ...payload })), })) export default useStore;사용방법im

19 days ago

1 min read

19 days ago

3 min read

React Custom Hook Custom Hook이란?여러 컴포넌트에서 비슷한 기능을 사용할 일이 발생하면 자신만의 Hook을 작성하여 함수를 재사용 할 수 있다.usePromise()import React { useState, useEffect } from 'react'; const usePromise = (promiseFn, deps) => { const [loading

19 days ago

3 min read

React Hook - useCallback, useMemo useCallback()과 useMemo()주로 렌더링 성능을 최적화 해야 하는 상황에서 사용한다.두 Hook 모두 메모이제이션 (memoization)을 통해 연산의 결과 또는 함수를 저장해 둔다.의존성 배열이 변경되지 않으면 이전에 계산한 값을 재사용한다.useCallback()함수를 새로 생성하지 않아도 될때 사용한다.useMemo()값을 새로 생성하

19 days ago

3 min read

React Hook - useRef useRef()이란?함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해주는 Hook이다.useRef를 사용하여 ref를 설정하면, useRef를 통해 만든 객체 안의 current값이 실제 Element를 가르키게 된다.useRef() 사용법import React, { useRef } from 'react'; const App = () => {

19 days ago

2 min read

React Hook - useContext useContext()란?해당 Hook을 사용하면 함수형 컴포넌트에서 Context를 보다 더 쉽게 사용할 수 있다.App.jsimport React, { useState, createContext } from 'react'; import exampleContext from './exampleContext.jsx'; export const colorCon

19 days ago

2 min read

React Hook - useEffect useEffect()란?리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다.useEffect()사용법import React, { useState, useEffect } from 'react'; const App = () => { const [name, setName] = useState(''); const

19 days ago

3 min read

React Hook - useState useState()란?가장 기본적인 Hook으로서, 함수형 컴포넌트에서 가변적인 상태를 지니고 있을 수 있도록 해주는 Hook이다.함수형 컴포넌트에서 상태를 관리해야 할 일이 발생하면 사용한다.useState() 사용법import React, { useState } from 'react'; const App = () => { const [num,

19 days ago

2 min read

React Hook (훅)React Hook 이란?함수형 컴포넌트에서 React State와 생명주기 기능(Lifecycle Features)을 연동할 수 있게 해주는 함수이다.Hook은 Class형 컴포넌트 안에서는 동작하지 않지만 Class없이 React를 사용할 수 있다.Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 해준다.Hook을 사용하여 컴포넌트의 상태

19 days ago

2 min read

React 설치와 사용이유 설치Node.js란?Chorme V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.노드 환경에서 자바스크립트 혹은 타입스크립트로 돌아가는 서버 또는 CLI 프로그램 등을 만들 수 있다.Node.js 설치Node.js 공식사이트NPM이란?Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램yarn도 같은 역할을 한다

19 days ago

5 min read

CRA(create-react-app)에서 webpack polyfill 설정 1. 필요한 polyfill 모듈 설치npm i react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process web3-utils2. webpack 설정파일 작성/config-overrides.jsco

19 days ago

1 min read

전상욱

6 팔로워

4 팔로잉

소프트웨어 개발자 전상욱입니다.

태그

Reactpolyfillcreate-react-appwebpackconfig-overrides.jsreact-scriptpackage.jsonnodejsnpmnpxjsxComponents리액트hookuseStateuseEffectuseContextuseReduceruseCallbackuseMemouseRefuseImperativeHandleuseLayoutEffectuseDebugValue함수형 컴포넌트디스트럭처링비구조화 할당cleanupcreateContextProvider메모이제이션Memoizationcustom hookusePromiseuseHook인기모듈라이브러리installmodule프레임워크json-serverstyled-componentslodashmomentframer-motionreact-iconsaxiosconcurrentlyreact-native-vector-iconsreact-navigation@mui/icons-materialzustandreact-nativecontext apiglobalState상태전역kakaologin카카오로그인APIopen apirecoilatomselectorRecoilRootuseRecoilStateuseRecoilValueuseSetRecoilStateuseResetRecoilStatesetStatearraymaptsxTypescriptonChangerefdata-tooltipTooltip툴팁onMouseenteronMouseleaveonMousemoveaddEventListenerremoveEventListenergetAttributequerySelectorAll

최근 댓글

아직 댓글이 없어요