앞의 글에서 리덕스에 대해서 자세히 살펴봤고, 이해했었다. 하지만, 마지막에 말했듯이 굳이 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 전달을..
우리는 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) 리액트에서의 사이드 이..
대부분의 웹 사이트에는 사용자의 입력을 활용한다. 따라서 사용자 입력값을 컨트롤하는 것은 매우 중요한 주제이다. 리액트에도 당연히 사용자 입력값을 컨트롤하는 방법이 존재한다. 그것도 두개나... 하나는 이미 state를 살펴보면서 알아보았다. (https://joseph0926.tistory.com/19#2.%20%EC%82%AC%EC%9A%A9%EC%9E%90%20%EC%9E%85%EB%A0%A5%EA%B0%92%20%EC%BB%A8%ED%8A%B8%EB%A1%A4-1) 이 방법은 사용자 입력을 컨트롤 하는 훌룡한 방법이지만, 약간의 단점도 존재하고 상황에 따라 맞지 않을 수 있다. 이럴때 대안으로 생각해볼수있는 것이 "ref"다. 이번 글에서는 기존에 알고있던 사용자 입력값 컨트롤 방법을 다시 자세히..
이 글에서는 중요하지만, 그냥 지나치기 쉬운 기능들을 정리해보려한다. 이 글에서 알아볼 것 Fragment Portal 1. Fragment 앞서 우리는 리액트의 기본개념을 알아보면서 JSX 코드에 대해서 살펴보았다. JSX 코드는 자바스크립트 코드와 HTML 코드를 동시에 활용할 수 있다는 점에서 굉장히 자유로운 개념이라 느꼈었다. 하지만, 이런 JSX 코드에도 제한사항이 존재한다. JSX 코드 제한사항 루트 수준의 JSX 요소들이 인접해있으면(래핑되어있지않으면) 에러 발생 즉, 루트 수준의 JSX는 반드시 한개여야한다 왜냐하면, 이를 반환하거나, 변수등에 저장하기 위한 제약조건이다. 이렇게 글로만 보면 어렵게 보이거나, 잘 와닫지 않지만 자바스크립트를 생각해보면 쉽게 이해가 간다. 자바스크립에서 re..
리액트를 공부하거나 작업하다 보면 배열를 활용하는 경우가 매우매우 많다. 보통 배열로열 이루어진 데이터를 map() 메서드를 통해 배열 요소들을 뽑아내는데, 이때, 기능은 정상적으로 작동하지만 콘솔에 Warning이 뜰것이다. 이 Warning 메시지를 읽어보면 "고유한 key prop이 필요"하다고 말해준다. 여기서 말하는 고유한 key prop이 뭘까? 또한, 이 Warning을 어떻게 해결할 수 있을끼? 이 글에서 알아볼 것 key prop 1. key prop 위에서도 언급했지만, 배열을 정상적으로 렌더링 하려면 고유한 key prop이 필요하다. 왜 그럴까? 배열 데이터의 요소들을 렌더링하여 리스트를 만들고, 거기에 새로운 요소를 동적으로 추가한다는 상황을 가정해보자 고유한 key prop이 없..
