React
React defaultProps
리액트에서 제공하는 defaultProps 속성을 통해 props의 기본값을 지정할 수 있다. Examples.defaultProps = { name: "", age: 20 }; function Examples({ name, age }) { return ( ); } 함수형 컴포넌트의 경우 자바스크립트의 기본값 매개변수 할당을 통해 props의 기본 값을 지정할 수도 있다. function Examples({ name = "" , age = 20 }) { return ( ); } 그렇다면 굳이 defaultProps을 사용해야 할 필요가 있을까? 관련 내용을 찾아보니 클래스 컴포넌트에선 생명주기 메서드가 서로 다른 스코프를 갖기 때문에 defaultProps를 사용했다고 한다. 함수형 컴포넌트가 대세인 지..
의존성 주입이란 무엇인가?
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. 객체지향 프로그래밍에서는 필연적으로 객체들 간의 협력을 요구한다. 각 객체들이 협력한다는 것은 서로 연결되어 있다는 것을 의미하고 이러한 특징을 의존성이라고 한다. 협력을 위해 의존은 필요하지만 과도한 의존은 코드의 유지보수를 어렵게 만들기도 한다. 객체들 간에 서로 주고 받는게 많아지다 보면 코드의 복잡도가 증가할 것이다. 하나의 기능을 수정하기 위해 수많은 코드를 수정해야만 하는 상황이 연출되기도 한다. 따라서 코드는 다양한 문맥에서 재사용할 수 있도록 작성하는 것이 바람직하다. 재사용하기에 용이하다는 것은 다른 요소와 유연하..
React-Thunk를 활용한 비동기적 상태관리
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. 리덕스는 기본적으로 동기적인 상태 업데이트를 수행한다. 만약 비동기적으로 상태를 업데이트해야 한다면, redux-thunk라는 미들웨어를 사용할 수 있다. thunk를 사용하면 액션 크리에이터가 액션을 리턴하는 대신 함수를 리턴할 수 있다. thunk가 action creator에 직접 개입하는 것은 아니다. 리듀서가 순수한 액션 객체를 인수로 받는 것과 달리, 미들웨어는 특정한 액션(여기서는 함수를 리턴하는 액션)을 인식하여 커스텀된 로직을 실행한다. 즉 미들웨어를 통해 커스텀 된 dispatch를 실행할 수 있다. 그래서 특정..
React-Redux 저장소(Store) 생성하기
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. //store.js import { createStore } from 'redux'; import reducer from './reducer'; const store = createStore(reducer); export default store; 리덕스의 store는 상태를 갖는 저장소이다. 그리고 단 하나의 리듀서라는 것을 갖는다. 리덕스의 createStore API를 통해 store를 생성하는데 그 첫번째 파라미터로 리듀서를 전달한다. 저장소(store)의 파일 이름은 store.js 로 생성해준다. //reducer.js..
Flux와 MVC의 차이에 대해 공부하기
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. Flux는 왜 등장했나? Flux의 도입 배경에 MVC가 등장한다. MVC는 양방향 데이터 흐름의 특징을 갖고 있는데 이 특징이 문제가 될 수 있다. 만약 어플리케이션이 복잡해지고 비대해진다면, 양방향으로 흐르는 데이터가 어플리케이션의 복잡도를 기하급수적으로 증가시킬 수 있다. 이는 우리의 코드가 읽기 어려워지고 예측이 불가능해진다는 것을 의미한다. MVC란? Flux와 MVC를 비교하기에 앞서, MVC를 살펴본다. MVC라는 이름은 Model, View, Controller의 이니셜이다. 각각은 다음과 같은 기능을 수행한다. M..