분류 전체보기

JSX Javascript 의 확장문법. 클래스형 컴포넌트: `render` 메소드에서 `ReactNode` 리턴 함수형 컴포넌트: `ReactElement` 를 리턴 JSX는 바벨에 의해 `React.createElement(component, props, ...children)` 함수로 transfile됩니다. //jsx Hello {this.props.toWhat} // transpile React.createElement('div', null, `Hello ${this.props.toWhat}`); React.createElement(Hello, {toWhat: 'World'}, null); 이 `React.createElement`를 호출하면, `ReactElement`, `JSX.Element..

https://ko.javascript.info/bubbling-and-capturing 서론 EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. 위의 코드에서 `` 를 클릭하면 div에 할당한 이벤트핸들러가 동작한다. 왜그럴까? 결론은 버블링 때문이다. 버블링 버블링이란, 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모요소의 핸들러가 동작한다. 가장 최 상단의 조상 요소를 만날때 까지 이 과정이 반복되며, 요소 각각에 할당된 핸들러가 동작한다. 그리고 document 객체를 만날때 까지 계속된다. FORM DIV P 위의 코드를 실행하고 `` 를 클릭하면, `form` `div` `p` 에 할당된 이벤트핸들러가 실행된다. 위에서 설명했던 것 처럼 이벤트버블링이 일어..

선언형 프로그램 어떻게 해야하는지 보다 무엇을 나타내야 하는지 설명하는 프로그램 React 공식페이지에서는 React는 선언형이라고 한다. 무슨 의미일까 ? 명령형 프로그램 예시 // Hello, World! 화면에 출력하기 // 순수 javaScript 명령형 코드 const root = document.getElementById('root'); const header = document.createElement('h1'); const headerContent = document.createTextNode( 'Hello, World!' ); header.appendChild(headerContent); root.appendChild(header); // React 코드 (선언적인) const heade..

HTML에서 자체적으로 제공하는 Geolocation API로 현재 사용자의 위치정보를 얻을 수 있다. navigator object 브라우저에 대한 다양한 정보를 제공하는 객체이다. 이navigator 객체를 이용해 geolocation 정보를 통해 위치정보를 얻을 수 있다. gelocation.getCurrentPosition 의 callback 함수를 통해, position 정보를 얻을 수 있다. navigator.geolocation.getCurrentPosition(success, error, [options]) 예시 function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + " Longitud..