Reactjs
-
[React] canvas ref로 DOM 접근 관련 짧은 설명.Frontend/react 2020. 11. 10. 12:40
React는 기존 html&javascript에서 주로 사용 했던 ElementById()와 같은 DOM에 직접적으로 접근하는 방법을 ref를 이용해서 한다. canvas 역시 객체를 랜더링 하려면 DOM에 접근을 해야한다. 그래서 아래와 같이 사용하면 된다. ... const objCanvas = this.m_objCanvas; if (objCanvas === null) { return; } // canvas 접근 const wScreen = objCanvas.clientWidth; const hScreen = objCanvas.clientHeight; const ctx = objCanvas.getContext('2d'); ... {this.m_objCanvas = ref} } style={styleP..
-
[React] How to stop refresh when submit formFrontend/maskeyes 2020. 3. 15. 03:11
리엑트에서 form을 submit 했을때 페이지 재실행 되지 않고 비동기 작업을 하는 방법. 먼저 나는 웹 개발 경험이 그렇게 많지 않다. 그래서 필요에 의해 한번씩 개발을 하게 될때면, 검색을 최대한 활용한다. 주소 검색 기능이 필요해서 작업 했던 과정(삽질?)을 남기고자한다. 아래는 bootstrap을 이용해서 Navigation에 Form을 가져왔다. 이동 여기서 시작이다. 이동 버튼을 누르면 submit 이벤트가 발생해 serachAddress 함수가 실행된다. searchAddress는 아래와 같이, 실행되면 input의 값을 dispatch 함수로 넘겨준다. searchAddress: (e) => { dispatch(mutations.searchAddress(e.target['inputAddr..