앞선 글에서 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) 리액트에서의 사이드 이..
https://joseph0926.tistory.com/25 [Javascript] 자바스크립트 비동기(Async)_01 (sync & async 코드, 이벤트 루프, 콜백함수, async / await 키워 앞선 글에서 내가 생각하기에 자바스크립트에서 개념적으로 가장 중요한 2 파트가 있는거 같다고 언급한 적이 있었다. 그중 두번째가 지금 알아볼 파트다 저번 중요 파트에서 개인적으로 자바 joseph0926.tistory.com 이 주제에 대해서는 위의 링크에서 자세히 알아본 적이 있다. 그럼에도 글을 하나 더 쓰는 이유는, 프로미스에 대한 설명이 없는 것과 위 글에서 설명이 부족한 부분의 보충이다. 이 글에서 알아볼 것 콜백 지옥 (Callback Hell) 이란? 프로미스 (Promise) 란? a..
보통 데이터를 저장할 때, 서버..즉 데이터베이스에 저장하는 경우가 대부분이다. 하지만, 브라우저에도 저장소가 마련되어있고, 상황에 따라서는 브라우저 저장소에 저장하는 것이 더 나은 상황도 존재한다. 서버에는 보통 중요한 데이터를 저장한다. 지속되어야하는 데이터로, 사용자에게서 분리하여 안전하게 저장한다 브라우저에는 여러 간단한 데이터를 저장할 수 있다. 웹사이트를 방문하였을 때 자바스크립트 코드에 의해 브라우저 저장소와 의사소통하여 사용할 수 있다 또는, 사용자가 브라우저에서 조작할 수 있지만, 다른 사용자와 공유는 할 수 없다 이 글에서 알아볼 것 LocalStorage, SessionStorage Cookies IndexedDB 1. LocalStorage, SessionStorage 특징 단순한 ..
자바스크립트는 매우 훌룡한 언어다. 상당히 유연하고 자유로우며, 범용성 또한 넓다. 하지만, 때로는 이러한 장점들이 문제가 되는 경우도 종종 존재한다. 그러면 자동적으로 이런 생각이 떠오를것이다. 자바스크립트의 장점은 챙겨가면서, 필요할 때는 엄격한 그런 언어는 없는지.. Typescript는 이러한 고민을 한번에 해결해준다. 이 글에서 알아볼 것 Typescript 란? Typescript의 장점 Typescript 시작하기 1. Typescript 란? 타입스크립트는 자바스크립트 슈퍼셋(Superset)이다. 즉, 타입스크립트는 자바스크립트를 기반으로 하는 프로그래밍 언어다 자바스크립트 장점 + 새로운 기능 추가 자바스크립트도 이미 충분히 훌룡한데, 거기에서 장점은 챙기고 단점은 보완하며 새로운 기능..
