Redux Toolkit와 관련한 레퍼런스를 알아보던 중 흥미로운 Reddit Discussion을 읽었습니다. 의견 작성자는 Redux가 Context API의 어떠한 문제점을 해결해주는지에 대해 발제하였고, 이에 대해 Redux 개발팀의 maintainer가 답변을 달았습니다. maintainer분이 댓글로 달아준 내용도 의견 작성자의 질문에 대한 충분한 답변이 되었지만, 레퍼런스로 남겨주신 Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)에서 이에 대한 보다 심도깊은 내용을 다루고 있었기에 공유해보고 싶었습니다. 원문의 내용을 최대한 온전히 전달하고자 노력했으며, 추가적인 이해가 필요한 부분은 별..

React에서는 전역상태 관리 라이브러리를 사용하여 체계적인 상태관리를 할 수 있습니다. React에서 활용되는 상태 관리 라이브러리들은 여러 개가 있습니다. 대표적으로 Redux, Recoil, Zustand, Jotai, MobX 등이 존재합니다. 그렇다면 이렇게 많은 상태 관리 라이브러리중에 어떤 라이브러리를 사용하면 좋을까요? 제 경우 사이드 프로젝트의 경우 가볍게 Recoil, Zustand를 많이 사용하곤 합니다. 저의 멘토님은 MobX의 열렬한 신봉자(?)이시고, 지인 중 한명은 Jotai 아이콘이 귀엽다는 이유로 Jotai공부를 최근에 시작했습니다. 물론 위와 같은 가벼운 이유로 상태 관리 라이브러리를 선정하기엔 리액트에서 상태 관리는 굉장히 큰 이슈입니다. 자신의 상황, 회사 내부 상황을..

React의 Component 에는 Life Cycle(생명주기)이 존재합니다. 라이프 사이클은 Component가 생성(Mount), 업데이트(Update), 제거(UnMount) 될 때 특정 이벤트를 호출하는 것입니다. 이러한 Life Cycle을 다루기 위해 리액트 클래스 컴포넌트는 Lifecycle Method를 사용하고, 함수형 컴포넌트는 Hook을 사용합니다. 이번 포스팅은 리액트 클래스 컴포넌트의 Lifecycle Methods에 대해 알아보겠습니다. 이번 포스팅에선 이전 포스팅에서 다룬 클래스 컴포넌트 개념과 React Hooks의 개념이 일부 사용되고 있습니다. Class Componet 생명주기 Lifecycle Methods는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서..

최근 진행한 Frontend 스터디 시간엔 React Hooks에 대한 학습을 진행하였습니다. React Hooks는 React 16.8 버전(2019년도)에 추가된 공식 라이브러리입니다. 제가 항상 강조하는 부분이지만 어떤 기술 스택을 배우기 이전에 '도입하게된 이유'를 학습하는 것은 해당 기술에 대한 다채로운 이해를 돕습니다. 따라서 이번 React Hooks 포스팅은 Hook의 도입 이전에는 어떠한 방식을 사용했고, React Hooks는 왜 도입하게 되었으며, React Hooks의 종류와 사용법에 대해 정리하였습니다. 이번 포스팅은 '이야기'의 형식을 사용하여 평소보다는 긴 호흡으로 작성하였습니다. Class Component와 Function Component 과거 React는 Class Co..

React에서 개발을 진행하신 분들은 아마 한번쯤은 JS확장자와 JSX확장자를 언제 사용해야 하는가에 대한 의문이 드실 수 있습니다. 대부분의 React강의를 보면 JSX확장자를 이용하여 개발을 진행하면 된다고 하는 경우가 일반적입니다. 하지만 간혹 JS확장자로 파일을 만들고 컴파일을 진행해도 에러 문구 없이 정상적으로 컴파일이 되는 경험을 하실 수 있습니다. 그렇다면 왜 jsx확장자를 사용하여 파일을 생성하라고 권장할까요 ? js와 jsx의 차이는 무엇일까요 ? 이러한 궁금증은 Typescript를 적용하여 React프로젝트를 진행할 경우 더욱 커지게 됩니다. 대부분의 강의 및 자료에서 TS확장자와 TSX확장자를 명확히 구분하여 사용하는데, '어떠한 기준'을 바탕으로 이를 구분하는지 모르고 사용하는 경..

컴포넌트나 소스파일들을 import 해올 때에는 해당 파일의 위치를 경로를 통해 명시해야 합니다. 하지만 프로젝트의 규모가 커질수록 불러오는 path의 경로가 난잡해지기 마련입니다. 특히 새로운 파일을 생성하거나 이미지를 추가하였을 때 해당 파일이 사용되는 곳에 경로를 추가하는 작업은 끔찍한 경험 중 하나입니다.. 이 때 오늘 배울 절대 경로를 사용한다면 보다 간결하고 직관적인 방식으로 경로를 추가할 수 있습니다. 오늘은 React의 대표적인 오버라이딩 패키지인 Craco를 설치하고, 이를 이용하여 Typescript Path alias를 설정하는 방법에 대해 알아보겠습니다. Craco 소개 CRA(Create-React-App)은 기본적으로 디렉터리 구조를 간결하게 하기 위해 WebPack설정이 들어있..

프로젝트를 진행하다 보면 크기가 커질수록 관리해야할 파일은 늘어나고 이에 따라 각 파일들을 용도에 맞게 분류해야할 필요성을 느끼게 됩니다. 저도 최근에는 프로젝트를 시작하기 전에 필요한 폴더들을 미리 생성하고 전체적인 프레임을 설계한 이후 개발을 진행하고 있습니다. 이번 포스팅은 리액트를 사용할 때 폴더의 구조를 어떻게 잡으면 좋을지에 대해 다뤄보겠습니다. 먼저 CRA를 설치했을 때 기본적으로 설치되는 폴더 및 파일들의 역할에 대해서 간단히 살펴보겠습니다. CRA의 초기 폴더구조 my-app ├── node_modules ├── public ├── src ├── .gitignore ├── package.json ├── package-lock.json └── README.md node_modules 현재 ..