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를 접하며 프론트엔드 개발을 시작할 당시 저는 GitHub라는 방대한 오픈소스 커뮤니티가 가지는 매력에 사로잡혔습니다. 분명 '코드'는 나의 자산이기때문에 Private하게 보관하고 남들에겐 숨길줄 알았지만 GitHub에는 자신의 코드를, 나아가 기업의 코드를 다른 개발자한테 공개적으로 선보이고 검증받는 자생적인 생태계가 자리 잡혀 있었습니다. 특히 지금까지도 사용하고 있는 React도 오픈소스 라이브러리라는게 아직도 믿기지가 않곤 합니다. 저는 개발을 처음 접했을 때부터 지금까지 개발자가 되고 싶은 이유가 한결같습니다. (낭만이 한 컵 들어갔지만요) 언젠가 오픈소스 저자가 되어 다른 개발자들과 오픈소스 생태계에 기여를 하자 하지만 '오픈..
React에서는 전역상태 관리 라이브러리를 사용하여 체계적인 상태관리를 할 수 있습니다. React에서 활용되는 상태 관리 라이브러리들은 여러 개가 있습니다. 대표적으로 Redux, Recoil, Zustand, Jotai, MobX 등이 존재합니다. 그렇다면 이 중에 어떤 상태관리 라이브러리를 사용해야할까요 ? 사실 이 문제에 정답은 없습니다. 지인들을 대상으로 간단한 설문을 진행한 결과만 보더라도 Redux, Recoil, MobX, Zustand 등을 실제 사용하고 있었고 회사별, 업무별로 사용하는 라이브러리가 달랐습니다. 그렇다면 어떤 상태관리 라이브러리를 배워두는 것이 향후 도움이될까요? 다음은 npm trends를 통해 상태 관리 라이브러리의 이용 추이를 확인해본 이미지입니다. 역시 아직까지는..
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..
Ruby on Rails의 개발자 데이비드 하이네마이어 핸슨(이하 DHH)의 Turbo 8 is Dropping TypeScript 포스트가 최근 화제를 모으고 있습니다. 최근 Svelte 또한 프레임워크 개발 시 TypeScript를 사용하지 않는 방향으로 전환하기도 해서 더욱 눈길이 가는 소식입니다. 해당 게시물은 여태까지 왜 TypeScript를 배우고 프로젝트에 사용해야하는지에 대해 별다른 비판없이 수용하던 저에겐 상당히 충격적인 내용을 다루고 있었습니다. 기회가 된다면 원문 전체를 옮겨보고 싶지만 오늘은 해당 게시물의 중요 포인트에 대해서만 다뤄보겠습니다. Turbo 8 is dropping TypeScript 원문 내용 DHH(David Heinemeier Hansson)가 제기한 TypeSc..
React에서 개발을 진행하신 분들은 아마 한번쯤은 JS확장자와 JSX확장자를 언제 사용해야 하는가에 대한 의문이 드실 수 있습니다. 대부분의 React강의를 보면 JSX확장자를 이용하여 개발을 진행하면 된다고 하는 경우가 일반적입니다. 하지만 간혹 JS확장자로 파일을 만들고 컴파일을 진행해도 에러 문구 없이 정상적으로 컴파일이 되는 경험을 하실 수 있습니다. 그렇다면 왜 jsx확장자를 사용하여 파일을 생성하라고 권장할까요 ? js와 jsx의 차이는 무엇일까요 ? 이러한 궁금증은 Typescript를 적용하여 React프로젝트를 진행할 경우 더욱 커지게 됩니다. 대부분의 강의 및 자료에서 TS확장자와 TSX확장자를 명확히 구분하여 사용하는데, '어떠한 기준'을 바탕으로 이를 구분하는지 모르고 사용하는 경..