코드 저장소

웹 프로그래밍/React 검색 결과

해당 글 3건

React 핸들러 bind 함수 생략하기

arrow function방식을 이용하면 bind함수를 작성하지 않아도 된다. 일반 함수일 경우 import React, { Component } from 'react'; class Basic extends Component { constructor(props) { super(props); this.onClickButton = this.onClickButton.bind(this); } onClickButton() { console.log('ok'); } render() { return ( 버튼 ); } }; export default Basic; arrow function을 사용할 경우 import React, { Component } from 'react'; class Basic extends Comp..

웹 프로그래밍/React 2017. 6. 21. 16:27

React Local State vs Redux State(Store) 언제, 어떤 것을 사용해야 하나?

이 글은 React State vs. Redux State: When and Why?의 내용을 참고하여 작성하였습니다. React State와 Redux State의 차이 React state는 컴포넌트에 지역적으로 저장되는 값으로 다른 컴포넌트에게 유동적인 값을 props 형태로 전달하는데 사용됩니다. Redux state는 전역 state로 어떤 컴포넌트라도 store를 통해서 접근가능하고 Container 컴포넌트에 데이터를 집중화시켜 하위 컴포넌트에서 데이터를 접근하지 않더라도 state를 쉽게 전달할 수 있게 해줍니다. Redux가 탄생하게된 이유는 간단하게 수많은 state를 관리하기 위해서입니다.프로젝트 규모가 커지고 복잡해지면서 상태가 많아지고 이를 관리하기 힘들어져 상태가 언제, 왜, 어..

웹 프로그래밍/React 2017. 6. 21. 16:25

React Router v4 리다이렉트 하기

1. Component를 이용하여 리다이렉트 import React from 'react'; import { Link } from 'react-router'; const FilterLink = () => ( {children} ); export default FilterLink; react-router의 Link 컴포넌트를 이용하여 redirect한다. 2. history props를 이용하여 리다이렉트 import React from 'react'; class Register extends React.Component { handleNext = () => { this.props.history.push('/'); } render() {...} } export default Register; this.pr..

웹 프로그래밍/React 2017. 6. 1. 18:26