개발 일기

'하이어오더 컴포넌트'는 자바스크립트의 고차 함수에서 유래되었습니다. 하이어오더 컴포넌트는 주로 반복되는 작업을 할때 중복을 줄이기 위해서 사용합니다. 저는 Context API를 사용을 할때 많이 사용을 했습니다. 기본 개념은 다음과 같습니다. 1. HOC는 함수나 클래스 형태의 컴포넌트를 반환할수가 있습니다. 2. HOC는 기존 컴포넌트에 연결된 프로퍼티를 모두 전달해야합니다. 3. HOC는 이름은 보통은 with로 시작합니다. 예시로는 아래와 같이 공통된 API를 호출을 할 경우에 사용을 할수가 있습니다. import React, { Component } from 'react'; import axios from 'axios'; // URL 첫번째 매개변수 // WrappedComponent 실제로 ..

일반적으로는 컴포넌트는 부모 컴포넌트가 자식과 상호작용을 할수 있는것은 props가 유일한 수단입니다. 하지만 자식을 수정하려면 새로운 props 전달을 해야하기 때문에 이러한 흐름에서 벗어나 직접적으로 자식을 수정해야하는일이 가끔씩 있을수가 있습니다. 그럴 때 Ref 프로퍼티를 사용으로 해결이 가능합니다 Ref를 사용해야 할때는 아래와 같이 가이드를 하고 있습니다. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 만약에 선언적으로 해결이 가능할 경우에는 ref 사용을 안하시는것이 좋습니다. Ref는 다음과 같이 React.createRef()을 통해 생성할수 있습니다. 그리고 보통은 컴포넌트가..

Component은 프로퍼티와 , state , 생명주기 함수가 들어가 있는 컴포넌트입니다. Component같은 경우에는 데이터가 변경된 경우에 항상 render()를 호출을 합니다. 하지만 PureComponent같은 경우에서는 shouldComponentUpdate() 함수에서 얕은 비교를 통해서 데이터가 변경된 경우에 render() 함수를 호출합니다. PureComponent를 통해서 불변 변수를 활용해서 숙서 정보가 바뀔 때마다 새 배열을 할당하는 방식으로 비교 속도를 최적화를 통해서 성능을 높일수가 있습니다. 간단하게 아래와 같이 테스트를 해볼수가 있습니다. import React from 'react' class MyComponent extends React.Component { compo..

생명주기는 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트 생명주기라고 합니다. 아래에서 해당하는 특정 시점에서 불리는 함수를 작성하도록 하겠습니다. constructor() constructor() 함수는 생성이 될때 한번만 호출이 됩니다. 따라서 상태를 선언하거나 초기화 할때 사용을 합니다. 정의를 할때는 super() 함수를 작성을 가장 먼저 진행을 해야합니다. render() render 함수 같은 경우에는 state가 변경이 되어 UI를 다시 그려야 할때 호출되는 함수입니다. getDerivedStateFromProps(props , state) 이 함수 같은 경우에는 정적 함수입니다. 그래서 static으로 선언을 해야합니다. 당연히 정적함수이기 때문에 this.state을 통해서 접근을 하실수..

React에서는 State를 통해서 상태 관리를 할수가 있습니다. 따라서 아래와 같이 상태를 변경하고 싶을 때 state를 직접 변경하는것이 아닌 setState를 통해서 변경을 해야합니다. import React from 'react' class MainComponent extends React.Component { constructor(props) { super(props) this.state = { time : new Date().getTime() } } clickEvent() { this.setState({ time : new Date().getTime() }) } render() { return ( {this.state.time} ) } } export default MainComponent 주..

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용합니다. 아래와 같이 속성형태로 값을 전달할수 있는것을 프로퍼티라고 합니다. function App() { return ( ); } 이제 위와 같이 name에 해당하는 값을 아래와 같이 this.props.name으로 값을 참조할수가 있습니다. import React from 'react' class MainComponent extends React.Component { render() { return ( {this.props.name} ) } } export default MainComponent 기억해야하는 내용은 위와같이 상위 컴포넌트에서 하위 컴포넌트로 전달되는 형식입니다. 프로퍼티에서는 다양한 자료형을 모두 사용할수가 있습니다. 위..

규모가 커지는 과정에 따라서 저장소가 매우 커지게 됩니다. 그러다 보면 저장소를 이제 나누고 싶을 경우가 생기는데 그럴때 사용하는것이 모듈을 통해서 저장소를 나눌 수가 있습니다. 각각의 모듈은 state , mutations, actions, getters을 포함 할수가 있습니다. const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: mod..

Action ? 2020/09/15 - [Client/vue] - Vuex ? 액션은 위에서 올렸던 변이와 유사합니다. 몇가지 다른 점을 나열해 보도록 하겠습니다. - 상태를 변이시키는게 아니라 액션으로 변이에 대한 커밋을 합니다. - 작업에 비동기 작업이 가능해집니다. actions: { incrementAsync(context) { setTimeout(() => { context.commit('increment') } , 1000) }, decrementAsync(context) { setTimeout(() => { context.commit('decrement') } , 1000) } }, 위와 같이 context을 통해서 commit을 하거나 혹은 context.state , context.get..