https://www.highcharts.com/demo/column-drilldown 이 예제를 React에서 만들어 보겠습니다. 1. highcharts 설치하기 create-react-app hello-react-hightcharts cd hello-react-hightcharts npm install --save react-highcharts highcharts-drilldowncreate-react-app으로 React 프로잭트를 설치하고, react-highcharts와 highcharts-drilldown 두개의 모듈을 설치합니다. react-highcharts를 설치하면, react-highcharts와 highchart 두개가 설치됩니다. react-highcharts는 React에서 h..
1. AJAX 비동기 작업 처리 React에서 ajax로 서버에 요청하는 방법을 이야기 할 것입니다. ajax를 요청하는 방법은 axios, jquery 등 여러가지 방법이 있지만, axios 모듈을 이용하여 서버 요청을 해 보겠습니다. 서버와 통신하여 아래와 같은 간단한 예를 만들어 보겠습니다. 1) axios 설치하기 create-react-app을 사용하여 react 프로젝트를 생성합니다. ([React.JS] CodePen, create-react-app으로 React.JS 개발하기 참고) create-react-app hello-axios cd hello-axios npm install --save axios2) axios 사용하기 axios의 제세한 내용은 https://github.com/m..
아래 그림과 같이 입력한 숫자를 더하는 counter을 redux를 사용하지 않고, redux를 사용하여, redux + react-redux를 사용하여 구현 한 3가지 코드를 비교하여 설명하겠습니다. create-react-app로 생성된 프로젝트로 진행 합니다. ([React.JS] CodePen, create-react-app으로 React.JS 개발하기 참고) 1. redux를 사용하지 않은 예제 Redux나 그 외의 모듈을 사용하지 않고, 순수 React만 사용하여 구현한 예제입니다. 컴포넌트 구조 컴포넌트 구조와, state 흐름은 아래 그림과 같습니다. Counter 컴포넌트는 계산된 값을 화면에 나타내는 컴포넌트 입니다. Option 컴포넌트는 계산할 값을 입력받는 컴포넌트 입니다. But..
Redux는 데이터를 효율적으로 관리 할 수 있게 해주는 아키텍쳐 입니다. 프로젝트의 규모가 커질 수록, 데이터가 복잡해 지는 자바스크립트 싱글 페이지 어플리케이션(Single Page Application)에서 매우 유용하게 사용 됩니다. Redux 공식 문서에는 Redux는 React 외에 다른 View 라이브러리와 함께 사용될 수 있다고 설명하고 있습니다. 저희는 React에 Redux를 적용해 보겠습니다. 1. Redux의 Data Flow 규모가 큰 프로젝트에서 Redux의 Data Flow는 코드를 명료하게 만드는 큰 장점을 가지고 있습니다. 스파게티 코드의 Data Flow 위와 같이 컴포넌트가 구성되어 있을 때, 주황색 컴포넌트의 state가 파란색 컴포넌트와 초록색 검포넌트에 전달되어야 ..
react-router는 create-react-app로 react 프로젝트를 생성하여 진행합니다. 1. create-react-app create-react-app 설치는 [React.JS] CodePen, create-react-app으로 React.JS 개발하기 참고 바랍니다. create-react-app이 설치가 완료 되었다면, react 프로젝트를 생성합니다. create-react-app hello-react-router2. react-router-dom 설치하기 npm install --save react-router-dom3. react-router 적용하기 create-react-app으로 프로젝트를 만들고, react-router-dom 모듈을 설치했다면, 기본 준비는 끝이 납니다. ..
React는 강력한 Composition model을 가지고 있기 때문에, 상속(Inheritance) 대신에 조합(Composition)을 사용하는 것이 좋습니다. 이번 포스트에서 React의 Composition을 이야기 하기 위해 간단한 Dialog 예제를 만들어 보겠습니다. 참고 - IS A 형태의 상속(Inheriance) class String extends Object { // 메소드 ... } 위의 String 클래스와 Object 클래스의 관계를 보면, String IS A Object 관계가 됩니다. 위와 같이 IS A 관계 일 때 Inheritance를 사용해야 합니다. - HAS A 형태의 조합(Composition) class BurgerSet { Burger name; }위의 B..
같은 데이터를 여러 컴포넌트에서 사용해야 할 때가 있습니다. 이 경우 각각의 컴포넌트가 동일한 값을 가지고 있는 방법이 있지만, 이 방법 보다도 공통 부모 컴포넌트가 진실의 근원(source of truth)이 되어 자식 컴포넌트에게 (parent -> child 방향으로) 데이터를 흘려보내는 방법이 더욱 좋습니다. 사용자의 입력값을 소문자, 대문자로 변경해 보여주는 컴포넌트를 만들어 보겠습니다. 1. Data flow (top-down data flow) 작성할 코드의 구조는 아래 그림과 같습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이트를 흘려보내야 합니다. function TextLength(props) { return Text lenght : {props.text.length} } class Te..
React의 elements는 HTML의 elements와 달리 state로 값이 유지됩니다. Name: 위의 HTML 코드의 Submit 버튼을 누르면, 파라미터(?name=...)가 붙은 채 새로운 페이지를 로드되는 것을 확인 할 수 있습니다. 대부분의 경우에, Submit 버튼을 누르면 handler 함수가 실행되어, 입력받은 값을 처리하는 것이 더 유용할 경우가 많습니다. React에서 input, select, textarea 태그에서 입력 받은 값을 컨드롤 하는 방식을 "controlled components"라고 합니다. 1. Controlled components React는 사용자의 입력 값에 따라 state의 값을 setState()로 업데이터하여, input, select, texta..
Lists JavaScript에서 map 메소드를 새로운 리스트를 생성하는 방법은 아래와 같습니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(number => number * 2); // 혹은 const doubled = numbers.map(function(number) { return number * 2; }); console.log(doubled); 이와 유사하게 React.JS에서 map 메소드를 이용하여 컴포넌트 리스트를 만들 수 있습니다. 1. 리스트 컴포넌트 랜더링 중괄호를 사용하면 JSX에 자바스크립트를 사용할 수 있습니다. ([React.JS] JSX 참고) const numbers = [1, 2, 3, 4, 5]; co..
Handling Events HTML 이벤트 핸들러 VS React 이벤트 핸들러React.JS에서 이벤트 핸들링은 DOM에서의 이벤트 핸들링과 비슷하지만, 몇가지 차이가 있습니다. 이벤트 핸들러 등록HTML에서 이벤트 핸들러 등록 방법은 아래와 같습니다. (이벤트 핸들링 방법이 여러가지 있겠지만...) BUTTON React에서 이벤트 핸들러 등록 방법은 아래와 같습니다. BUTTON 이벤트의 기본 동작 막기HTML에서 이벤트의 기본 동작을 막기 위해서는 return false를 이용해야 했습니다. LINK 하지만 React에서 return false로는 이벤트의 기본 동작을 막지 못합니다. preventDefault를 사용해야 이벤트의 기본 동작을 막을 수 있습니다. function EventHand..