융융이'Blog

##redux-logger yarn add redux-logger src/store.js import { createStore } from 'redux'; import modules from './modules'; import { applyMiddleware } from 'redux'; //미들웨어 적용하는 함수 이다. import { createLogger } from 'redux-logger'; const logger = createLogger(); const store = createStore(modules, applyMiddleware(logger)); export default store; createLogger를 통하여 미들웨어의 상태를..

immutable.js는 자바스크립트에서 불변성 데이터를 다룰 수 있도록 도와줍니다. immutable은 페이스북에서 json형태의 데이터를 변형하거나 값을 바꿀 때 유용하게 사용하기 위해서 만든 라이브러리이다. const { Map } =Immutable; let data = Map({ a: 1, b: 2, c: Map({ d: 3, e: 4, f: 5 }) }); let object1 = data.setIn(['c','d'], 10); console.log(object1.get('c').get('d')); // 10 console.log(data.get('c').get('d')); // 3 Map을 이용하여 데이터를..

리덕스는 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태관리 라이브러리입니다. 리액트는 다양한 컴포넌트의 집합체이며 상하위 관계를 유지하면서 앱을 구성하게 된다. 만약 child단에서 handling이나 state변화가 일어나면 최상위 APP을 거쳐서 child까지 전달하는 구조이기 때문에 앱의 효율성이 떨어진다. 리덕스를 이용한다면 위 그림과 처리하기 때문에 보다 효율적으로 프로젝트 관리가 편리하다. 스토어 : 애플리케이션의 상태 값들을 내장하고 있습니다. 액션 : 상태 변화를 일으킬 때 참조하는 객체입니다. 디스패치 : 액션을 스토어에 전달하는 것을 의미합니다. 리듀서 : 상태를 변화시키는 로직이 있는 함수입니다. 구독 : 스토어값이 필요한 컴포넌트는 스토어를 구독합니다.

yarn add styled-components 컴포넌트 스타일링하는 데 제일 각광받고 있는 패키지 styled-components가 있다. import React from "react"; import styled from "styled-components"; import PropTypes from "prop-types"; const Container = styled.button` width: 100%; border: 0; border-radius: ${props => props.theme.borderRadius}; color: white; font-weight: 600; background-color: ${props => props.theme.blueColor}; text-align: center; p..

언제 함수형 컴포넌트를 사용해야 할까? 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등 불필요한 기능을 제거한 상태이기 때문에 메모리 소모량은 일반 클래스형 컴포넌트보다 적습니다. 리액트 v16이상에서는 함수형 컴포넌트 성능이 클래스형 컴포넌트보다 조금 더 빠릅니다. 그래서 state나 라이프사이클 API를 꼭 써야 할 때만 클래스형태로 변환하여 컴포넌트를 작성하면 됩니다. import React from 'react'; function Hello(props){ return( Hello {props.name} ) } export default Hello; import React from 'react'; const Hello = ({name}) =>{ return (..

리액트의 라이플 사이클은 총 세가지 마운드, 업데이트, 언마운트 입니다. 라이플 사이클에서 주로 사용되는 함수들 render()함수 이 메서드는 컴포넌트 모양새를 정의합니다. 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환합니다. 이 메서드 안에서 절대로 state를 변형해서는 안되며, 웹브라우저에 접근해서도 안됩니다. DOM 정보를 가져오거나 변환를 줄 때느 componentDidMount에서 처리 해야합니다. constructor 메서드 constructor(props){...} 이것은 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행됩니다. 이 메서드에서는 초기 state를 정할 수 있습니다. ##componentDidMount메서드 이..

import React, {Component} from 'react'; class IterationSample extends Component{ render(){ const names = ['123', '345','567'] const nameList = names.map( (name, index) => ({name}) ) return ( {nameList} ) } } export default IterationSample; react에서는 배열을 나열할 때는 반드시 고유key를 정해줘야한다. 보통 key 값으로 index를 자주 사용한다.

REACT에서 지원하는 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection Touch UI Image Wheel Animation Media Transition import React, {Component} from 'react'; class EventPractice extends Component { state = { message: "" } constructor(props){ super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } //값이 변화할 때 handleChange(e)..