타입스크립트에는 여러 장점들이 존재하지만, 최고의 장점은 type을 선언하여 에러등을 미리 잡을수있다는 점이다. 이러한 타입 선언 방식에 대해서 살펴보고, 타입스크립트가 어떻게 타입을 활용하는지 알아보자 이 글에서 알아볼 것 타입 애너테이션 타입 추론 자바스크립트 type vs 타입스크립트 type 1. 타입 애너테이션 타입스크립트에게 해당 변수등의 타입이 뭔지 알려주는 구문이다 const myVal: type = value; 이런 구조로 사용할수있다. 단, 타입 애너테이션에서의 원시 타입은 모두 소문자여야한다 2. 타입 추론 위에서 알아본 타입 애너테이션이 대부분의 경우에는 직접 명시할 필요가없다,, 왜냐하면 타입스크립트 자체가 타입을 추론하기 떄문이다 특정 변수나 상수에 어떤 타입을 사용했는지를 타입..
리덕스의 리듀서 함수에는 중요한 규칙이 하나 존재한다. 반드시 순수함수이며, 사이드이펙트가 없고, 동기식이어야한다. 하지만 웹 애플리케이션을 구축하다보면, 필수적으로 사이드이펙트 & 비동기 코드가 들어가야할때까 존재한다. 이럴때는 어떻게 처리해야할까? 이 글에서 알아볼 것 Redux에서 SideEffect & Async 사용 방법 Redux에서 SideEffect & Async - 컴포넌트 Redux에서 SideEffect & Async - 액션 생성자 1. Redux에서 SideEffect & Async 사용 방법 리덕스에서 사이드이펙트 & 비동기 코드를 사용하는 방법은 2가지이다. 컴포넌트에서 처리 컴포넌트에서 사이드이펙트등이 처리된 후에만, 리덕스에게 액션을 보낸다 따라서, 리덕스는 사이드이펙트등의..
앞의 글에서 리덕스에 대해서 자세히 살펴봤고, 이해했었다. 하지만, 마지막에 말했듯이 굳이 Context 대신 Redux를 사용해야할 이유를 찾지 못했었다. 이러한 고민을 한번에 해결해주는 것이 Redux Toolkit이다. 이 글에서 알아볼 것 Redux Toolkit 이란? Redux Toolkit 사용법 1. Redux Toolkit 이란? Redux를 도와주는 써드파티 패키지이다. 뭘 도와준다는 것일까? 상태 변경 불가성 문제를 해결해준다 복잡한 상태 관리를 도와준다 몇몇 기능들을 더 직관적이고, 쉽게 사용하도록 도롸준다 2. Redux Toolkit 사용법 1. 기존에 설치되어있는 redux를 삭제 왜냐하면 리덕스 툴킷에 리덕스가 포함되어있다. 2. npm install @reduxjs/tool..
앞선 글에서 Context를 살펴보았고, Context를 활용하면 상태관리가 엄청 효율적으로 가능해지고, 전역적으로 관리 가능하다는 것을 알아봤다 하지만 몇몇 단점들도 존재했다. 그리고 마지막에 이러한 단점을 해결해주는 대안이 존재한다고 언급했었는데, 그것이 지금 알아볼 Redux다. 이 글에서 알아볼 것 Redux란? Redux 작동방식 (이론) Redux 작동방식 (코드) Redux 특징 및 한계 1. Redux란? 리덕스는 크로스컴포넌트state or 앱 와이드state에서 상태를 관리하도록 도와주는 시스템이다. 여기서 말하는 크로스컴포넌트 state, 앱 와이드 state란 뭘까? 로컬 state 데이터가 변경되어서 싱글 컴포넌트에 영향을 미치는 상태 주로 useState를 사용하고, 좀 복잡하면..
이번에 정리할 내용은 Context다. 내가 이걸 처음 배웠을 떄 마법이라 느꼈다. 조금 과장하는면도 있지만, 여태까지의 힘들었던것들을 뚫어주는 면에서는 마법 그 자체였다. 또한, 이게 있는데 왜 힘들게 props 드릴링을 사용하지? 라는 의문도 들었다. (이건 마지막에 서술할 context 한계에서 알아보자) 내가 왜 이런 느낌이 들었는지 정리해보겠다. 이 글에서 알아볼 것 Context 1. Context 여태까지 우리는 리액트에서 데이터 전달을 props을 이용해 수행해왔다. 하지만 이 방식은 큰 한계점이 존재했었는데, 바로 직속으로만 전달할수있다는 점이였다. (상위 or 하위 상관없이) 이러면 A라는 state를 여러 곳에서 사용하고 싶거나, 직속이 아닌곳에서 사용할때 매우 많은 props 전달을..
이전 글에 중에 클로저를 설명하는 글에서, 내가 생각할 때 자바스크립트에서 개념적으로 가장 중요한 것이 두개있다고 했었다. 사실 세개다.....ㅠ 왜 두개라고 뭉겠었냐면 그 당시에 이 개념을 100% 이해하고 있지 못했다. 사실 지금도 100% 이해했다고 자신있게 말 못할것같다. 그래도 계속 이해하려 노력하고, 정리하면서 어느정도 이해가 되어 글을 작성해보려한다. 이 글에서 알아볼 것 프로토타입 (Prototype) 1. 프로토타입 (Prototype) 프로토타입이란? 자바스크립트는 프로토타입 기반 언어로, 프로토타입 상속을 사용한다. (예전에, 강의 듣다가 이 말 듣고 그냥 자러갔던 기억이있다..) 무슨 말인지는 밑에서 서술하겠다. 또한, 프로토타입은 객체로, 모든 객체는 프로토타입을 가진다. (__p..
우리는 useState를 알고있고, 활용할 수 있다. 또한, 이 훅을 통해 상태관리를 문제없이 진행하고 있었다. 하지만, 작업을 하다보면 state들이 많이 존재하거나, 서로 엉켜있어 상당히 골치아픈 경우가 종종 발생한다. 이런 경우에도 useState를 활용해서 당연히 해결할 수 있다. 그래도 마음속으로는 좀 더 편한 기능이 있었으면 좋겠다 라고 바라는게 정상일것이다. 이러한 고민을 해결해주는 리액트 훅이 useReducer 훅이다. 이 글에서 알아볼 것 useReducer useEffect와 useReducer 같이 사용할 때 발생하는 사소한 문제점 1. useReducer 앞에서 간략하게 소개했지만 다시 자세히 알아보자 useReducer란? state를 관리하는 리액트 훅이다. 정확히 말하면, 복..
이전 글중에 순수함수를 알아보면서 부수효과 (side effect)에 대해서 알아본 적이 있었다. 리액트에서도 이런 부수효과와 관련된 기능이 존재한다. (자바스크립트에서의 사이드이펙트와 리액트에서의 사이드이펙트는 살짝 느낌이 다르다) 이 기능은 앞서 알아본 useState와 마찬가지로 리액트에서 제공하는 리액트 훅이다. 이 글을 시작으로 중요한 리액트 훅 3 + 1 개를 알아보면서 리액트에 대해서 더 깊게 이해해보자 이 글에서 알아볼 것 React에서의 Side Effect useEffect 1. React에서의 Side Effect 자바스크립트에서의 사이드 이펙트는 함수의 동작으로 인해 외부가 바뀌는 것을 말했었다. (https://joseph0926.tistory.com/21) 리액트에서의 사이드 이..
