개발/ReactJS

리액트 #08 - Forms

이번에는 리액트에서 Form을 어떻게 다루는 지에 대해서 알아봅시다. 리액트는 데이터의 흐름이 단방향입니다. 따라서 여러 폼에 변화하는 같은 값을 적용하려면, 따로 처리를 해주어야 합니다. 아래와 같이 초기 value 값을 state.data로 적용해주고, 이 후에 onChange로 변하는 값을 state로 갱신합니다. App.js import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { data: 'Initial data...' } this.updateState = this.updateState.bind(this); }; updateState(e) { this..

리액트 #07 - Component Life Cycle

ReactJS에는 컴포넌트들에 대한 라이프 사이클 메서드들이 존재합니다. 이번 포스트에서는 이 라이프 사이클 메서드들에 대해서 알아봅시다. Life Cycle Methods- componentWillMount 서버와 클라이언트 모두에게 렌더링하기 전에 작동됩니다. - componentDidMount 클라이언트에서 첫 렌더링이 이루어지고 난 후에 작동됩니다. 이 메서드에서 AJAX 리퀘스트나 DOM, state 갱신을 진행합니다. 또한 다른 자바스크립트 프레임워크나 다른 함수들과 합쳐지는 것에 사용되며, 이 때는 setInterval이나 setTimeout 등과 같은 함수로 지연을 시키게 됩니다. - componentWillReceiveProps Prop가 갱신되면, 다른 렌더링이 작동하기 전에 불려집니다..

리액트 #06 - Component API

이번에는 Component API 중 setState(), forceUpdate(), 그리고 ReactDOM.findDOMNode()라는 메소드에 대해서 알아보자. setState setState는 state를 변경할 때 사용합니다. 기존의 state를 대체하는 것이 아닌, 기존의 state에 변화를 줍니다. App.js import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [] } this.setStateHandler = this.setStateHandler.bind(this); }; setStateHandler() { var item = "setState..."..

리액트 #05 - State & Props

ReactJS #05 - State & Props 이번 포스팅에서는 리액트의 State와 Props에 대해서 알아보겠습니다. State State는 데이터가 오는 곳입니다. 리액트를 사용할 때에는 이 State를 최소화 하고, stateful 컴포넌트를 줄이는 것이 좋습니다. 만약 스테이트를 사용하는 10개의 컴포넌트를 사용한다면, 한 컴포넌트에서 다른 모든 state를 정의하고 다른 컴포넌트를 참조하여 사용하는 것이 좋습니다. App.js import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { header: "Header from state...", "con..

리액트 #04 - Components

React JS #04 - Components 리액트는 컴포넌트로 시작해서 컴포넌트로 끝난다고 해도 과언이 아니다. 이번 포스트에서는 리액트의 컴포턴트에 대해서 예시를 통해 알아보자. Stateless Example 처음에는 State가 없는 컴포넌트를 만들어보자. 우선 컴포넌트는 컴포넌트들끼리 참조가 가능하다. 다음과 같이 App.js를 수정해보자. import React from 'react'; class App extends React.Component { render() { return ( ); }} class Header extends React.Component { render() { return ( Header ); }} class Content extends React.Component {..

리액트 #03 - JSX

React JS #03 - JSX 리액트는 일반적인 Javascript 와는 다르게 JSX라는 템플릿을 사용한다. 꼭 필요한 건 아니지만, 많은 장점이 있다. - JSX는 Javascript 코드로 컴파일하는 과정에서 최적화된다. - JSX는 예측불가능한 결과를 내지 않는다. 대부분의 에러들은 컴파일과정에서 발견된다. - HTML에 친근하여 개발이 쉽고 빠르다. JSX 사용하기 JSX는 일반적인 HTML과 많이 닮았습니다. class App extends React.Component { render(){ return ( Hello World!!! ); }} HTML과 비슷하지만, JSX를 쓰기위해선 많은 것들을 염두해두고 있어야합니다. Nested Elements 많은 것들을 반환하고자 한다면, 하나의 ..

리액트 #02 - 개발환경 구축

React JS #01 2014년에 핫하게 나와서 최근까지도 많은 사랑을 받고 있는 리액트. 리액트의 시작부터 리액트 네이티브의 끝까지 공부하는 시간을 가져보겠다. 개발환경 구축 - 모듈 설치 이번에는 리액트를 시작하기에 앞서, 무엇보다 중요한 개발환경을 구축해보자. Babel babel은 최신의 Javascript 문법을 사용하게 해주는 툴입니다. 설치npm install babelnpm install babel-corenpm install babel-loadernpm install babel-preset-reactnpm install babel-preset-es2015 Webpack webpack은 모듈 번들러입니다. 웹팩은 클라이언트 사이드에서 사용되는 Javascript 파일들을 묶는 목적으로 사..

리액트 #01 - Overview

React JS #01 2014년에 핫하게 나와서 최근까지도 많은 사랑을 받고 있는 리액트. 오늘부턴 리액트의 시작부터 리액트 네이티브의 끝까지 공부하는 시간을 가져보겠다. React JS란? 페이스북에서 개발한 유저 인터페이스 라이브러리로써, 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 한다. 현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은 큰 서비스에서 사용되고 있다. 특징은 다음과 같다. 특징- JUST THE UI React.js는 UI 컴포넌트를 만들기 위한 라이브러리입니다. 컴포넌트 지향 프레임워크는 여러 가지가 있지만 React.js는 정말 UI 컴포넌트만 지원합니다. 비록 지원하는 범위는 작지만, 애플리케이션을 만드는 방법을 크게 바꿀 수 있다는 점이 재미있습니다. 또한..