javascript7 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. Typescript 타입 정의 파일 typescript는 컴파일 과정을 거쳐 타입 검증을 하는데, 검증을 하려면 타입이 정의된 파일이 있어야 한다. typescript로 작성한 모듈이라면 문법 자체에 타입이 있으니 문제없지만 javascript로 작성된 모듈을 사용하려면 컴파일러가 타입 검증을 할 수 없게 된다. 모듈의 타입을 알려주기 위해 .d.ts 파일을 두어 타입을 선언해 줘야 한다. 하지만 이 파일은 타입스크립트의 컴파일 과정에 필요한 거라서 npm 같은 저장소에 공개된 모듈들의 필수사항이 아니다. 따라서 typescript 프로젝트에서 .d.ts파일이 없는 외부 javascript 모듈을 받아온다면 문제가 발생한다. 다행히도 요새는 @types/{module_name}의 타입 정의 파일도 배포되기 때문에 타입 전용 모듈도 받음으로.. 2020. 3. 29. CommonJS / ES 모듈 로딩 방식 모르고 사용하다가는 여러 모듈을 가져다 쓸 때 헷갈릴 수 있어서 가장 기본적인 방법부터 복습해보았다. typescript를 사용하면 typescript의 기능도 섞여있기 때문에 눈에 잘 안 보이는 경우가 있으니 주의하면서 정리해봤다. tsconfig.json의 compilerOptions는 "target": "ES2017" 로 두고 import/export 하는 방법은 다음과 같다. module.ts const obj = { a: 10, b: 20 } const func = (x: number) => x*2 const name = 'myName' export default obj export { func, name } export로 해당 멤버를 외부로 노출시키는데 default 키워드를 추가하면 impo.. 2020. 3. 29. ES8의 async와 await 이전 글(Promise)에서 비동기 작업을 구현하는 방법으로 콜백과 Promise에 대해서 알아봤다. javascript에서 피할 수 없는 비동기 작업을 구현하는데 초기에 콜백을 이용했고, 이를 개선하기 위해 ES6에 Promise가 등장했다. Promise가 chaining을 통해 콜백의 많은 부족한 부분을 해결했지만, 역시 동기적인 코드가 갖는 직관적인 인상은 줄 수 없었다. 이처럼 아직 비동기 작업의 구현에는 갈증을 해소하지 못했고, 이를 채워줄 새로운 스펙이 ES8(ECMA2017)의 async와 await이다. async - await 요청 시점과 응답 시점이 달라서 구현하기 힘들었던 비동기 작업을 콜백, Promise로 제어했지만 역시 이상적으로는 아래처럼 동기적인 작업처럼 코딩하고 싶다. f.. 2019. 10. 16. ES6의 Promise Javascript에서는 실행 결과를 받을 때까지 기다리지 않고 다음 작업을 이어서 하는 비동기 요청을 자주 쓴다. 요청과 완료 시점이 다르기 때문에 코딩은 더 어렵게 느껴지지만 javascript가 실행되는 single-thread 환경을 생각해보면 자주 사용할 수밖에 없다. 예를 들어 browser에서 동기적으로 작업을 한다면 그 작업이 진행되는 동안에 사용자의 액션은 freezing 될 것이고, 이런 browser는 아무도 사용하지 않을 것이다. 비동기를 자주 사용하는 환경인 만큼 이를 구현하는 방법도 시간에 따라 진화하고 있다. 최신 표준에서는 어떻게 구현을 하는지 알아보기 앞서서 진화해온 과정을 익히기 위해 옛날 방법부터 시작해서 ES6에 등장하는 Promise까지 알아보자. Callback j.. 2019. 10. 16. 이전 1 2 다음
