React
1.React 설치와 사용이유
Chorme V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.노드 환경에서 자바스크립트 혹은 타입스크립트로 돌아가는 서버 또는 CLI 프로그램 등을 만들 수 있다.Node.js 공식사이트Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리
2.React Hook (훅)
함수형 컴포넌트에서 React State와 생명주기 기능(Lifecycle Features)을 연동할 수 있게 해주는 함수이다.Hook은 Class형 컴포넌트 안에서는 동작하지 않지만 Class없이 React를 사용할 수 있다.Hook은 계층 변화 없이 상태 관련 로직
3.React Hook - useState()
가장 기본적인 Hook으로서, 함수형 컴포넌트에서 가변적인 상태를 지니고 있을 수 있도록 해주는 Hook이다.함수형 컴포넌트에서 상태를 관리해야 할 일이 발생하면 사용한다.useState를 사용할 때에는 코드의 상단에서 import구문으로 불러온 후 사용해야한다.imp
4.React Hook - useEffect()
리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다.만약 useEffect에서 설정한 함수로 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우에는 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는
5.React Hook - useContext()
해당 Hook을 사용하면 함수형 컴포넌트에서 Context를 보다 더 쉽게 사용할 수 있다.1\. 하위 컴포넌트로 전달해줄 값을 상위 컴포넌트에서 createContext로 생성 후 export 한다.2\. 전달 받을 하위 컴포넌트를 <Context명.Provid
6.React Hook - useRef()
함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해주는 Hook이다.useRef를 사용하여 ref를 설정하면, useRef를 통해 만든 객체 안의 current값이 실제 Element를 가르키게 된다.컴포넌트에서 로컬 변수를 사용해야 할 때도 useRef를 활용할
7.React Hook - useCallback(), useMemo()
주로 렌더링 성능을 최적화 해야 하는 상황에서 사용한다.함수를 새로 생성하지 않아도 될때 사용한다.값을 새로 생성하지 않아도 될때 사용한다.이와 같이 list의 값이 변경 되어야 함수와 값들을 새로 생성시키므로 인하여 렌더링 해야 할 컴포넌트가 많을 경우에는 list의
8.React Custom Hook
여러 컴포넌트에서 비슷한 기능을 사용할 일이 발생하면 자신만의 Hook을 작성하여 함수를 재사용 할 수 있다.이와 같이 비동기 호출이 필요할 때 프로미스를 생성하는 promiseFn과 언제 새로 함수를 만들지에 대한 조건을 deps 배열을 파라미터로 전송한다.deps
9.React 인기 모듈
가데이터 생성REST API 지원React에서 스타일 생성Sass, Scss 문법 사용가능dictionary, array 타입에 대한 데이터 조작이 용이dictionary, array 타입에 대한 데이터 조작이 용이React에서 애니메이션 사용이 용이React에서 SV
10.React 전역 State 사용 (zustand)
이 모듈은 React, React Native에서 사용이 가능하다.(타입스크립트를 지원한다.)
11.React 카카오 로그인
kakao developers 홈페이지 접속 후 로그인 (kakao developers link)상단 메뉴 -> 내 애플리케이션 진입 후 애플리케이션 추가하기 선택애플리케이션 추가 모달 화면애플리케이션 내용을 입력한 후 저장좌측 메뉴에서 제품 설정 -> 카카오 로그인
12.React 아이콘 사용
material-ui-icons해당 사이트에서 사용할 아이콘을 클릭한 후 import 구문을 복사한다.page.tsx
13.React Recoil로 상태관리 방법
recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다.루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소다.index.tsAtom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수
14.React 배열 다루기 (기초)
data.d.tsdata.tsApp.tsx저장 버튼 클릭 시 화면
15.Recoil Selector에서 비동기 함수를 사용했을 때 에러처리 방법
<RecoilRoot> ... </RecoilRoot>를 사용한 컴포넌트로 이동한다.React.Suspense를 사용하여 클라이언트가 아직 준비되지 않은 상황의 처리를 할 수 있다.
16.React Tooltip 만들어보기
툴팁을 토글하기 위해 요소를 선택할 필요가 있었다.첫 번째로 생각한건 useRef를 사용하여 요소를 선택하는 것이였는데 useRef를 사용하기 위해 툴팁이 필요한 요소에 모두 ref 속성을 넣어주기는 사용하기도 불편했고 ref 값에 배열로 만들어 처리하는 것도 그렇게