React12 [ReactJS] scroll to top 특정 컴포넌트의 스크롤을 위로 올리기 위한 방법이다. componentDidUpdate() { let scroll = this.refs.scrollElement || document.getElementById('scrollElement'); scroll.scrollTop = 0; } render() { return ( ... ... ... ) } 스크롤을 변경하고자 하는 부분에 id를 추가하고 componentDidUpdate 함수에 스크롤 변경 코드를 추가하면 된다. 2017. 7. 31. [다음 API] 지도 하얀 화면 / 지도 보이지 않는 이유 다음 API 를 사용하다 지도가 하얀 화면으로 처리되어 보이지 않는 경우가 발생했다. 다음 카페 및 검색을 통해 찾은 결과 위의 현상이 발생하는 경우에 몇 가지 원인이 있었다. 1. 잘못 입력된 API 키 2. 파일 주소로 된 경우 src="//apis.~~"를 보면 //apis는 파일 경로이므로 자신의 홈페이지에 따라 http, https 를 붙여줘야 한다. 3. map 이 여러개 생성된 경우var map = new daum.maps.Map(mapContainer, mapOption); 이 경우는 잘 모르겠으나 Map 객체가 여러개 생성되면 지도가 표현이 안 되는 경우가 있다고 한다. 4. 같은 id를 사용할 경우 ... 위 예제와 같이 다음 주소 api 공식 홈페이지의 예시에서는 id로 구현되어 있다.. 2017. 4. 11. [ReactJS] add component in list 동적으로 리스트 안의 값을 추가하여 보여줘야 하는 경우가 있다. ReactJS 에서는 render() 안의 값을 동적으로 보여주기 위해서는 state 를 이용해야 한다. import React from 'react';import TmpComponent from './TmpComponent'); export default class TestClass extends React.Component { constructor(props) { super(props); this.state = {resultAjax: [],tmpState: [],checked: [] } } componentDidMount() { // Ajax 호출 ...for (..) {checked[i] = false;this.setState({res.. 2016. 12. 29. [React] window.print window.print() 함수를 사용하면 브라우저를 쉽게 인쇄할 수 있다. window.print() 는 기본적으로 document.body.html 을 바라보기 때문에 만약 어떠한 영역을 인쇄하고 싶다면 html 값을 변경해 줘야 한다. 기본 윈도우 사용 in React let ReactDOM = require('react-dom'); ... printFunc = () => { var printContents = ReactDOM.findDOMNode(this.refs.printArea).innerHTML); var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; windows.prin.. 2016. 11. 30. 이전 1 2 다음