웹/react.js5 react-redux index.js import 'core-js/stable'; import 'regenerator-runtime/runtime'; import 'react-app-polyfill/ie9'; import 'react-app-polyfill/stable'; import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import App from './App'; import * as serviceWorker from './serviceWorker'; import rootReducer from './modules'; const s.. 2021. 3. 3. onClick 대신 onMouseDown button 등을 클릭시 스크롤의 변화 또는 다른 이벤트가 먼저 실행되어서 onClick이 아예 실행되지 않으면 onMouseDown을 적용해보자. 왜그럴까... 이벤트 버블링에 문제가 있는듯... blueshw.github.io/2018/04/23/event-bubbling-capturing/ 2021. 3. 3. ie11에서 onMouseEnter가 중첩되었을때 event를 하위 컴포넌트까지 pass 하지 않음. import React from 'react'; const Btn = () => { return ( { console.log('Btn onMouseEnter'); }}>클릭 ) } export default function Component() { return ( { console.log('Component onMouseEnter'); }} > ) } 2021. 3. 3. onMouseEnter 이슈 보통 onMouseEnter, onMouseLeave 를 쌍으로 사용한다. 그런데 간혹 onMouseLeave event가 발생되지 않는 케이스가 있다. leaver가 발생할 수 있는 dom 자체가 사라지면, leave가 발생하지 않는다. import React from 'react'; export default function Component() { const [highlight, setHighlight] = React.useState(false); const [visible, setVisible] = React.useState(true); return ( { setHighlight(true); }} onMouseLeave={() =>{ setHighlight(false); }} > Event1 hi.. 2021. 3. 3. Context 예제 Test.tsx import React, {useContext} from 'react'; import ColorContext, {ColorProvider} from '../contexts/color'; const Update1 = () => { const { state, actions } = useContext(ColorContext); console.log('state', state); return ( state: {state.color} { actions.changeColor('hahah'); actions.increase(123); }}>클릭 ) } const Select1 = () => { const { state, actions } = useContext(ColorContext); console.. 2021. 3. 3. 이전 1 다음