jcargun

리액트에서 툴팁을 만들기 위해서 react-bootstrap을 사용했다. react-bootstrap에는 많은 기능들이 있지만 그중 OverlayTrigger, Tooltip를 사용하여 img 태그에 tooltip을 적용시켜 보았다. import { OverlayTrigger, Tooltip } from "react-bootstrap"; import questionImg from "assets/imgs/question.svg"; 먼저 react-bootstrap의 OverlayTrigger와 Tooltip를 import 한다. img태그에 사용할 이미지 파일도 import 한다. function QuestionTooltip({ text }) { return ( ); } QuestionTooltip이름으로..

리액트를 사용할때 상태관리를 하기위해서는 기본적으로 리액트에서 제공하는 Hook기능이 있지만, 각 컴포넌트간에 상태를 공유하며 사용하기위해서 MobX를 사용하게 되었다. Mobx란? MobX는 functional reactive programming을 투명하게 적용함으로써 상태 관리를 쉽고 확장성 있게 만들어주는 검증된 라이브러리입니다. MobX가 말하는 MobX의 장점은 쉽다, 렌더링 최적화를 쉽게 할 수 있다, 구조가 자유롭다 입니다. MobX는 action이 state를 변경하는 단방향 데이터 흐름을 사용하여 영향을 받는 모든 view를 업데이트합니다. state가 변경되면 모든 derivation이 자동으로 그리고 원자 단위로 업데이트됩니다. 결과적으로 중간 값을 관찰할 수는 없습니다. 기본적으로..

Hook은 리액트 16.8 버전에서 소개된 기능으로 간단하게 상태관리를 하기 좋은 기능이다. Hook에는 useState, useEffect, useContext, useReducer, useRef 등이 있다. useState import { useState } from "react"; const [name, setName] = useState(''); setName(e.target.value)} /> useState를 사용하기 위해서는 react모듈의 useState를 import 해야 사용할 수 있다. const [name, setName] = useState(''); 상태 변수를 설정하고 기본값을 ''으로 설정한다. name은 useState의 값을 불러올때 사용하며, setName은 useStat..

리액트란? 리액트는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리입니다. 프론트앤드 개발에 사용되며, 데이터와 상태(state)를 관리하며 컴포넌트 기반의 아키텍처를 사용한다. 기본적으로 Hook를 사용해서 상태관리를 할 수 있으며, Redux, MobX등과 조합하여 상태관리를 할 수 있다. 설치 방법 리액트를 사용하기 위해서는 기본적으로 Node.js가 설치되어 있어야 한다. Node.js의 설치 방법은 Node.js 공식 웹사이트에서 Node.jsㅇ 설치파일을 다운로드하고 설치하면 된다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org npm은 Node.js가 설치되면 함께..