리액트와 전역 상태 관리
리액트 상태관리는 기본적으로 state에 기본 값을 지정하고 setState를 사용하여 data를 추가,제거 그리고 수정한다. state를 props로 서로 넘겨주며 data를 공유하고 setState를 통해 data를 수정하는 등 간단한 방법으로 React에서 상태 관리를 할 수 있지만 application의 규모가 복잡해지고 커질수록 상태 관리는 더욱 더 힘들어진다.
앱이 커질수록 상태 관리가 엉망이 됩니다. 그렇기 때문에 Redux, Recoil과 같은 상태 관리 툴이 필요하며 이것은 상태를 더 쉽게 유지할 수 있습니다.
리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있습니다.
거의 최초로 React 기반의 상태 관리 라이브러리로 자리를 잡은 지 꽤 됐습니다. Redux는 이커머스 앱의 문제점을 해결하기 위해 만들어졌습니다. Store라고 하는 Javascript 객체를 제공하며, 한 번 설정으로 어플리케이션의 모든 상태를 포함하고, 필요할 때 업데이트 합니다.
Redux를 사용하면 상태를 끌어올리는 번거로움이 없어져 어떤 액션이 변경되었는지 쉽게 추적할 수 있으므로 앱이 간편해지고 유지관리가 쉬워집니다. eact Redux는 성능 최적화를 보장하여 필요할 때만 연결된 컴포넌트를 다시 렌더링 합니다. 따라서 앱의 상태를 글로벌하게 유지하는 것은 문제가 되지 않습니다.
CSS 라이브러리와 리액트
styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리입니다. 이에 대한 대안으로는 emotion 와 styled-jsx가 있습니다.
CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.
기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 방식이였다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리 때문에 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있다.
웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript을 몽땅 때려 박는 패턴이 많이 사용되고 있습니다. React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있습니다.
4주차 소감
4주차에서는 리액트 심화 강의를 제공해주고 개인 심화과제를 내주었다. 심화라서 기초반때보다 난이도가 많이 높아졌다. 사람들이 내용에 많이 어려워했고 나도 그 중 하나였다. 로그인 기능과 서버와의 게시글 CRUD, 무한스크롤 등 많은것을 배웠다. 특히 리덕스와 미들웨어 CRUD 코드가 길어지면서 파악이 제대로 되지 않아 어려웠던 부분 중 하나였다. 어찌해서 과제는 냈지만 내가 만든것 보다는 수업코드와 참고 코드를 많이 갔다가 써서 찝찝한 마음이 들었다. 앞으로 여러 프로젝트를 진행하면서 계속 많이 써보겠지만 리덕스와 미들웨어 CRUD는 꾸준히 하다보면 정복될꺼라고 생각한다.
