React.js 썸네일형 리스트형 React 기본개념 Flux - Model과 View의 연결성이 복잡해지면서 구현하는 것과 연결성을 이해하는 것에 어려움이 생겼고, 이를 해결하기 위해 나온 아키텍처 형태 사용자의 입력 데이터, 객체를 Action이라 합니다. 사용자가 조작하는 것, 그것이 어떤 행동이 될 수 있고 어떤 물체가 될 수 있습니다. 이를 모두 액션이라 부릅니다. 액션을 거쳐 들어온 정보(데이터)는 디스패처(Dispatcher)를 통해 스토어(Store)에 등록됩니다. 디스패처는 모든 데이터의 흐름을 관리하는 이벤트 관리자로 생각하면 됩니다. 스토어에서는 애플리케이션의 상태와 로직을 저장하는 장소입니다. MVC 모델 중 Model과 비슷한 역할을 하며, 애플리케이션 자체 도메인에서 상태를 관리할 수 있습니다. 디스패처를 사용해서 전달된 액션을 받.. 더보기 create-react-app Create-react-app 이란? React 작업 환경을 구축해 주면서 webpack / babel 등의 작업 환경을 별도로 구축하지 않아도 자동으로 구축해준다.Dan Abramov (Redux 창시자) 님의 개발하신 내용인데요 사용법에 대해서 간략히 알아보겠습니다. 우선 create-react-app 설치 이 전에 반드시 설치되어야 할 부분은 node.exe가 설치 되어야 합니다. 아래 내용은 node cli에서 진행하기 때문입니다. 노드 설치 : https://nodejs.org/en/download/ (노드를 자신의 컴퓨터 OS에 맞게 설치하시고 기본 환경 구축 및 예제를 진행하고 다음 아래 내용을 진행해주시면 감사하겠습니다.) 설치 npm install -g create-react-app Ap.. 더보기 Redux 소개 Redux는 Flux와 같은 역할을 한다. (Flux는 앞서 내용 참조해주시길..!)하지만 Flux 내에서도 문제가 있는데 이러한 문제를 해결하고자 더 상위버전으로 나온 것이 Redux라고 할 수 있다. What is Redux? 1. Single Source of Truth - Application의 Store를 위해, 단 한 개의 Store를 사용한다." Flux는 여러 Store를 사용하지만 Redux는 하나의 Store를 사용한다. " - Store의 구조 - nested 구조로 component 별로 구조화 되어 있거나 event 별로 구조화 또는 App의 Data나 Component의 UI와 같은 틀로 구조화 되어 었음. 2. Store는 읽기 전용으로 되어 있기에 값을 직접 변경할 순 없다... 더보기 FLUX 소개 오늘은 FLUX에 대해서 소개해 드리고자 합니다.FLUX는 페이스북에서 React.js 와 함께 나온 라이브러리로 어플리케이션 내에 데이터를 취급하기 위한 패턴입니다.단방향 데이터 흐름을 갖고 기존 MVC 모델의 한계를 극복하고자 만들어졌습니다. 그럼 FLUX의 배경부터 알아볼까요? 1. FLUX의 배경은 MVC 패턴의 한계를 극복하고자 나왔다. MVC 모델은 서버를 다룰 줄 아는 사람에게는 가장 유명한 패턴이라고 알고 있을 것입니다.하지만 MVC 모델은 비동기적 구현이기에 발생하는 문제가 있습니다. Model에서는 데이터와 관련된 내용들을 관리하고 Controller는 Model과 View 사이에서 중간자 역할을 하며일 처리를 하게 됩니다.View는 발표자 역할로 사용자들에게 데이터를 시각화 하는 역할.. 더보기 keyEvent / ref / LifeCycle 오늘은 keyEvent와 focusing을 주기 위해 사용하는 ref 그리고 LifeCycle에 대해서 설명드리도록 하겠습니다. keyEvent란? : 키보드에서 발생하는 이벤트로 charCode나 인자로 받는 event.key를 통해서 접근할 수 있습니다. [예시] https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode handleKeyPress(e) { // event if (e.charCode === 13) { // charCode >> 엔터 this.handleClick(); } } 이벤트 객체의 charCode를 뽑아내면 13으로 나오는 정수 값이 Enter 키를 의미하기 때문에 엔터를 칠 경우 handleClick() 메.. 더보기 주소록 추가 파트 * Immutability helper 심화 * 이 전 내용에서는 배열이나 오브젝트에 요소들을 지우거나 추가 및 수정하는 작업을진행하였다면, 이번엔 이를 React.js에 접목시켜서 진행해보도록 하겠습니다. 이번 포스팅에서는 이름이랑 전화번호를 입력하고 버튼을 클릭하게 되면 해당 내용이 주소록에 추가되는 것을 진행해보도록 하겠습니다. https://github.com/Haamseongho/React_Study/tree/haams/contact 앞서 진행하였던 코드를 이용하여 진행해보도록 하겠습니다. 이 전 내용을 모르신다면, 확인 후에 다음 URL을 따라 clone이나 fork뜨길 권장합니다. 시작 전에 어떤 방식으로 진행될 것인지 먼저 생각하고 코딩해봅시다. 해야할 것 1. 이름이랑 전화번호를 입력할 틀을 만든다.2. 등록할 버튼을 만든다.3. 이름.. 더보기 Immutability helper 오늘은 페이스북에서 객체나 배열을 더 쉽게 수정하기위해 만든 immutable.js와 이를 spread연산자를 이용하여 다른 방법으로 풀어내는 spread.js를 소개하겠습니다. React.js에서 State값을 변경시킬 때에 setState 함수를 이용하여 변경하였습니다. 이 부분에 배열이나 객체 내의 키를 변경하려 할 때 쉽게 수정하는 방법이 있는데,이를 Immutability helper라 합니다. 설치 npm install --save react-addons-update 사용법import update from 'react-addons-update'; // ES6 var update = require('react-addons-update'); // ES5 with npm 본격적으로 시작 하기에 앞서.. 더보기 Contact * 주소록 심화 * 이번엔 주소록 관련 심화 버전을 진행해보려고 합니다.코드 먼저 보여드리고 하나하나씩 정리하겠습니다. import React from 'react'; import ContactInfo from './ContactInfo'; import ContactDetails from './ContactDetails'; export default class Contact extends React.Component { constructor(props) { super(props); this.state = { keyword: "", // input name ="keyword" 여기서 입력 하는 내용을 (인풋에 쓰는 값 >> state에 값 을 넣기 위함 ) // react-loader >> component가 수정되어서 re.. 더보기 이전 1 2 다음
