react2 react-redux 사용법 부모-자식으로 이루어진 복잡한 컴포넌트들 사이에 이벤트를 주고받는 과정을 구현한다고 생각해보자. props의 callback으로 자식은 부모 컴포넌트에게 이벤트를 전달하고, 부모는 다른 자식에게 state 변경을 통해 이벤트를 전달한다. 어떤 상태 값과 관련이 있는 컴포넌트만 신경을 쓰면 좋겠지만 그 둘을 연결하는 모든 컴포넌트를 거쳐야 한다. 성능을 떠나서 반복적인 작업에 골치가 아프다. redux redux는 컴포넌트 전역에서 관리할 저장소를 만든다. 컴포넌트 간에 이벤트 전달을 위한 코드를 추가할 필요가 없다. export default reducer(function(state = { count: 0 }, action) { switch(action.type) { case 'INCREMENT': re.. 2020. 5. 17. React class vs function component 차이점 이전에 함수형 컴포넌트는 기능상 부족했던 부분이 있어서 특정 형태로만 쓰였다. 클래스 컴포넌트의 state, lifecycle 등의 기능을 구현할 수 없었는데, 이런 부족한 기능을 구현할 수 있는 방법이 추가되면서 기능상의 차이점은 거의 없어졌다. props 두 컴포넌트 모두 props는 바로 참조할 수 있다. 클래스 컴포넌트에서는 전달한 props 값을 this.props을 통해 접근한다. class ClassComponent extends Component { render() { return ( count: {this.props.count} ) } } 함수형 컴포넌트에서는 전달한 props 값을 함수의 parameter로 받는다. function FunctionComponent(props) { ret.. 2020. 5. 17. 이전 1 다음
