일단 Doit

Android에서는 물리적인 Back 버튼이 존재합니다. 따라서, Hybrid Web 개발시 해당 버튼의 액션을 고려해야 합니다. 고려해야하는 경우는 팝업이나 Toast UI 같은 화면 위에 뜨는 팝업 즉, Layer 팝업이 열렸을 경우 입니다. Android Native앱에서는 Layered UI에 대한 Back 버튼 기능을 제공하나, Hybrid Web에서는 개발자가 직접 구현해야합니다. 이때 onpopstate Event를 사용하여 해당 기능을 구현할 수 있습니다. Layered UI는 history의 잡히지 않습니다. 따라서 history back키의 동작이 이전 history 즉, 팝업을 띄운 페이지 전페이지로 돌아갑니다. 그래서 LayeredUI를 강제적으로 history.forward를 실행..

React 2023. 2. 7. 10:20

forwardRef는 component간 ref를 전달하기 위해 사용하는 Function 입니다. React에서는 ref를 props로 직접전달하지 않고 fowardRef를 통하여 해당 ref를 전달합니다. DOM 엘리먼트로 ref 전달하기 고차 컴포넌트(Higher Order Component)로 ref 전달하기 그러면, 일반적으로 사용될 수 있는 공통 팝업을 통해 구현해보겠습니다. 팝업은, - Transition 효과가 적용되어야 하며 - close 함수를 제공하여햐 합니다. 1. forwardRef를 사용하여 component 생성 - 인자로 props, ref 전달받는 component를 생성합니다. - ref는 해당 팝업의 close함수를 "상위 컴포넌트에서 사용하고자 참조하기 위해서" 사용합니..

React 2023. 2. 1. 22:04

Recoil Atom 공식 문서를 보면 상세하게 알 수 있습니다. https://recoiljs.org/docs/basic-tutorial/atoms/ Atoms | Recoil Atoms contain the source of truth for our application state. In our todo-list, the source of truth will be an array of objects, with each object representing a todo item. recoiljs.org 단순하게, Recoil은 상태를 관리하는 라이브러이며, Atom은 상태단위 RecoilState입니다. 간단하게 사용법을 알아보자면, 사용방법은 아주 쉽습니다. key, default 설정만 하면 끝입니다..

React/Recoil 2023. 1. 27. 18:21

CSSTransition을 사용하면 팝업에서 Transition 효과를 적용 할수 있습니다. https://reactcommunity.org/react-transition-group/transition React Transition Group A function child can be used instead of a React element. This function is called with the current transition status ('entering', 'entered', 'exiting', 'exited'), which can be used to apply context specific props to a component. {state => ( )} reactcommunity.org ..

React 2023. 1. 27. 17:53

1. 팝업 Component 생성 - props로 해당 Component에 값을 전달 - 여기서는 onClosed 함수를 전달하여 뒤로가기 버튼을 눌렀을때 이벤트를 전달해줍니다. export default function PopupTodo(onClosed) { return ( 팝업 Todo 할일1 할일2 ); } 2. 부모 Component에서 팝업 제어 - state를 사용하여 팝업 Component를 제어 합니다. - true : mount, false : unmount - onClosed 이벤트를 전달받아 해당 state를 false로 변경합니다. export default function HomePage() { const [isShowPopup, setShowPopup] = useState(fal..

React 2023. 1. 25. 16:52