What is Redux? Redux는 Cross-Component State 또는 App-Wide State를 위한 state 관리 시스템이라고 한다. 즉, 애플리케이션 상호작용으로 변경된 정보를 화면에 표시하는 데이터(state)를 다수의 component나 더 나아가 App 전체에서 관리할 수 있도록 도와준다. 자세한 사항은 아래 링크를 참고할 수 있다. Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org Categories of State 이미 앞서 useState나 useReducer를 사용하여 그러한 데이터들을 관리했는데, 그 기능에 따라 아래 세가지로 구분지을 수 있다. Local S..
Custom Hook이란? useState()와 같은 내장된 Hook(정규 함수)과 동일하다. 다만, 내부 상태를 설정할 수 있는 로직이 포함된 것 뿐이다. custom hook은 재사용 가능한 함수에 상태를 설정하는 로직을 outsourcing할 수 있는 장점이 있다. 다시 말해, 정규 함수와는 다르게 custom hook은 다른 custom hook을 포함한 다른 react hook들을 사용할 수 있다. useState()나 useReducer()를 통해 관리하는 React state를 활용할 수 있다는 말이다. 이를 통해 다양한 component에서 호출이 가능해지며, 로직 재사용이 가능한 매카니즘이다. 주로, 코드가 중복되는 경우 re-factoring과 함수의 재사용을 위해서 이용된다.일반적인 ..
React를 공부하다보면, TypeScript라는 것으로 코딩할 수 있다고 알게된다. 그러면 이번시간에는 TypeScript가 무엇이며 왜 사용해야하는지에 대해서 알아보자. What is TypeScript? TypeScript는 JavaScript의 superset 언어로 JavaScript를 기반으로 하되 보다 확장된 프로그래밍 언어라는 뜻이다. 이는 아주 중요한 특징 중 하나로, TypeScript의 뿌리에는 여전히 JavaScript가 있다는 것을 의미한다. 그렇기에 JavaScript의 기본 문법들, 코드 작성법, 조건문, 반복문, 객체 사용법 등등 그대로 사용 가능할 것이다. 다만, 몇가지 기능이 추가된 것이다. 또한, TypeScript는 React와 달리 JavaScript의 library..
이제껏 component를 제작할 때, 함수형 component만을 사용했었다. React에서는 함수형이 아닌 다른 방법으로 component를 빌드할 수 있다. React hook에서도 잠깐 다뤘지만, Class를 이용해서 component를 제작할 수 있다. 물론, hook이 도입된 이후로 React project에서는 거의 이 방법을 사용하지 않는다. 따라서, 이부분은 생략을 해도 무관하지만 아직 여전히 많은 third party library나 이미 제작된 project에서 볼 가능성이 있다. Functional Components그 전에 이제까지 배웠던 함수형 component에 대해서 정리하고 넘어가자.function Product(props) { return A Product! ;}// o..
이미 여럿 살펴보았기에 알만한 내용이지만 React에서의 state는 매우 중요한 개념이다. state라는 것은 component를 다시 렌더링하고 화면에 표시되는 것을 바꾼다. 이번에 다룰 것은 React가 어떻게 state를 업데이트하는지에 대해 알아보고자 한다. Scheduled State 이제껏 배운 내용은 component 안에 useState() hook을 이용해 일부 상태들을 관리할 수 있었다. 'DVD' 값을 가진 product라는 state를 DVD에서 Book으로 state를 변경한다고 해보자. 그동안 살펴보면서 setNewProduct('Book') ;과 같이 업데이트 함수를 통해 state를 갱신했었다. 여기서 살펴봐야하는 부분은 setNewProduct('Book') ;이 실행되어..
