beomy

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..

State와 Liftcycle State의 필요성시계 컴포넌트를 만들어 봅시다. 시계 컴포넌트를 만들려면, 매초마다 화면을 갱신해야 시간이 흐르는 것처럼 보이겠죠? function Clock(props) { return ( {props.date.toLocaleTimeString()} ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); CodePen으로 예제 확인하기 화면을 다시 그려주는 방법으로, setInterval()를 사용하여 ReactDOM.render()을 매초 호출하여 화면을 갱신하였습니다. 매초 화면을 갱신하는 기능은 Clock 컴포넌트 안에서 구현하는 것이 ..

Components와 Props Component는 UI를 독립적(independent)하게 나누는 단위입니다. Component는 독립적이고, 재사용 가능해야 합니다. Component는 JavaScript에서 함수, Props는 함수의 인자값으로 생각 할 수 있습니다. 함수는 인자 값으로 어떠한 값을 만들어 내고, Component는 Props로 어떠한 UI를 만들어 냅니다. Component 종류Component를 만들어 내는 방법은 function을 이용하는 방법과 ES6에서 추가된 class를 이용하는 방법 2가지가 있습니다. Function ComponentComponent를 표현하는 가장 간단한 방법입니다. function Welcome(props) { return Hello, {props...

JSX React.JS는 일반적인 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 구성하게 됩니다. 아래의 코드를 JSX라고 합니다.const element = Hello, world!;JSX는 JavaScript의 확장 구문으로 JavaScript의 모든 기능을 제공합니다. 위의 element 변수를 보면 HTML 태그를 정의하는데, 따옴표를 사용하지 않는 것을 볼 수 있습니다. JSX의 사용은 React.JS에서 필수는 아닙니다. 하지만 JSX를 사용하는 것이 어플리케이션의 속도와, 코드 작성에서 더 쉽고 빠르게 개발 할 수 있게 해줍니다. JSX Tag 안에 JavaScript 사용하기JSX 안에 JavaScript를 사용하려면 중괄호{} 를 사용하면 됩니다. function squa..