Dev
-
[JS] React.js JSX 없이 React 사용하기Dev/JS 2018. 6. 3. 16:44
React Without JSX JSX는 React 를 사용하는데 필수 조건이 아닙니다. JSX를 사용하지 않고 React를 쓰면 컴파일 설정을 하지 않을 때특히 더 편리함을 느낄 수 있습니다. 여러 JSX 요소들은 단지 구문에 설탕정도로 여겨집니다. 예를 들어 React.createElement(component, props, ...children) 을 부를 때 처럼 말이죠. 그래서, JSX를 사용하면서 할 수 있는 모든것을 plain Javascript 만으로도 할 수 있습니다. 예를 들어, 이 코드는 JSX로 사용된 코드 입니다. class Hello extends React.Component { render() { return Hello {this.props.toWhat}; }} ReactDOM...
-
[JS] React.js Portal 알아보기Dev/JS 2018. 6. 3. 16:34
Portal Portal은 상위 컴포넌트의 DOM 계층을 구조 외부에 있는 DOM의 하위 항목으로 렌더링 하는 좋은 방법을 제공합니다. ReactDOM.createPortal(child, container) createPortal의 첫번째 인자인 child 는 요소, 문자열 또는 Fragment 와 같은 렌더링이 가능한 React의 하위 요소 입니다. 두번째 인수 container은 은 DOM 요소를 말합니다. Usage 일반적으로, 컴포넌트의 render 메소드에서 요소를 반환하면 가장 가까운 부모 노드의 자식으로 DOM에 마운트됩니다. render() { // React는 새로운 Div를 마운트 하고 자식요소에 렌더링 합니다. return ( {this.props.children} );} 하지만, 때..
-
[JS] React.js Fragment 알아보기Dev/JS 2018. 6. 3. 16:05
Fragments React의 패턴은 Component가 여러 요소를 반환하는 것이 일반적입니다. Fragements 를 사용하면 DOM 노드에 추가하지 않고 하위의 목록을 그룹화 할 수 있습니다. render() { return ( );} 새롭게 짧은 구문도 나왔지만, 아직 많은 툴에서 지원하지 않고 있습니다. Motivation 일반적인 패턴은 아래와 같이 컴포넌트가 자식리스트를 반환하는 것 입니다. class Table extends React.Component { render() { return ( ); }} 는 HTML이 정상적으로 동작하기 위해 여러개의 요소들을 반환해야 합니다. 만약 부모 div가 의 render() 안에서 사용되었다면, HTML는 정상적으로 동작하지 않을 것 입니다. 다음과..
-
[JS] React.js Context API 알아보기Dev/JS 2018. 6. 3. 15:46
Context 일반적인 React 어플리케이션에서 데이터들은 prop를 통해 하향식(부모 -> 자식) 으로 전달이 됩니다. 하지만,어플리케이션 내에 많은 컴포넌트들이 특정 타입의 props(예를 들어 locale 설정, ui 테마) 를 받기 위해서는 좀 번거로울 수 있습니다.그래서 Context 는 트리 레벨을 통해 prop를 전달하지 않으면서 컴포넌트 끼리 값을 공유하는 방법을 제공합니다. Context를 언제 사용하느냐? Context는 현재 인증된 사용자, 테마, 또는 기본 설정 언어와 같은 React 의 여러 컴포넌트에 대해서 '전역' 으로 여겨질 수 있는 데이터들을 공유하도록 설계되었습니다. 예를 들어 아래 코드에서는 Button 컴포넌트의 스타일을지정하기 위해 'Theme' props를 수동으..
-
[JS] SPA를 구현할 수 있는 Mithril.js 소개Dev/JS 2018. 6. 3. 14:08
Mithril.js ? Mithril은 SPA를 구현할 수 있는 모던 클라이언트사이드 자바스크립트 프레임워크 입니다. Mithril은 용량이 작고, 빠를 뿐더러, 라우팅과 XHR 유틸을 지원합니다. Mithril은 VImeo, Nike 와 같은 회사에서 사용하며, 오픈소스 플랫폼입니다. 만약 여러분이 어느정도 개발을 할 줄 알거나, Mithril이 다른 프레임워크들과 어떻게 다른지 궁금하다면 이 document를 참고하시면 될 것 같습니다. Getting started 이 포스팅에서는 Mithril을 쉽게 사용하기 위한 방법을 제공하고 있습니다. 튜토리얼이라고 해서 별로 없을 것 같지만, CDN을 사용하고, 라우팅 및 XHR이 포함된 API 거의 대부분을 사용하고 있습니다. 그럼 HTML 파일을 만들어 ..
-
[JS]Javascript 이벤트 전파 막기Dev/JS 2018. 5. 21. 23:29
Javascript 이벤트 전파 막기 이벤트 전파를 막을 수 있는 방법에는 대표적으로 3가지가 있습니다. e.stopPropagation(), e.stopImmediatePropagation(), e.preventDefault() 이번 포스팅에서는 각각의 특징에 대해서 알아보도록 하겠습니다. 1. e.stopPropagation(); e.stopPropagation() 메소드를 호출하면 버블링 단계에서 상위로 가는 이벤트 전파를 막을 수 있습니다. 만약, 1번째 요소에 e.stopPropagation() 메소드를 호출하고, 1번 요소를 클릭하면 호출은 1번 요소만 호출되게 됩니다. 또한, stopPropagation은 한 요소에 여러개의 리스너가 등록되어 있어도, 모두 실행하고 전파를 막습니다. 그래서 ..
-
[JS] Javascript Propagation :: 이벤트 버블링, 이벤트 타겟, 이벤트 캡쳐Dev/JS 2018. 5. 21. 21:54
Javascript Propagation 이란? Propagation 이란 이벤트가 전파되는 모든 경로를 포함하는 말이다. 이때 Javascript 개발을 하면서 많이 들어봤을 이벤트 버블링 이라는 용어가 나온다. 버튼~ 위와 같은 구조를 가졌을 때, 을 클릭하면 상위에 있는 요소들(a, li, ul, div)에 다 onclick 이벤트가 발생하게 된다. 이벤트는 계속 위로 올라가게 되는데, 이때 window 객체를 만나면 이벤트가 종료된다. 클릭한 은 이때 event target이 된다. 그리고 여기서 요소들은 하나의 브랜치를 만들게 되는데, 이 브랜치 안에는event target을 포함하여 window 까지의 모든 요소들이 다 들어가게 된다. 위의 예제에서는 button, a, li, ul, div,..
-
[JS]react-router 적용해보기Dev/JS 2018. 5. 21. 16:31
개요 react-router 란 클라이언트 사이드에서 주소값의 변경에 따라 페이지 혹은 컴포넌트의 변화를 제공하기 위한라이브러리 입니다. 예를 들어 사용자가 회원가입을 위해 /join 에 접근했을 때, react-router는 회원가입 페이지를 렌더링해줍니다. react-router는 페이스북에서 공식으로 지원하고 있는 라이브러리는 아니지만, 많은 사용자를 보유하고 있다고 합니다. 설치 npm 을 사용하여 react-router-dom 을 설치해줍니다. > npm install --save-dev react-router-dom ################################ react-router와 react-router-dom의 차이 : react-router는 코어까지 들어있는 master..