Web&Hybrid/React

개요프로젝트를 진행하던 중에 여러 컴포넌트에서 공유해야 할 데이터가 생겼다. 그래서 React에서는 이걸 어떻게 해야하는지? 찾아보다가 전역 상태 관리를 해주는 다양한 라이브러리들을 알게 됐고, 그 중 Redux와 Zustand에 대해서 정리해보려고 한다. 1. 전역 상태 관리란?여러 컴포넌트에서 공유하는 상태를 한곳에서 집중적으로 관리하는 것을 의미한다.나의 경우는 로그인 한 회원의 정보를 여러 컴포넌트에서 공유해서 사용하기 때문에 전역 상태 관리가 필요하다! 추가로 전역 상태 관리를 사용해야 하는 이유들을 정리하면 다음과 같다. 1) props drilling-> 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때, 중간 컴포넌트들을 거쳐야 하는 과정을 의미하는데 이것을 드릴에 빗대서 상위 컴포넌트..

개요이제 프로젝트 서버 통신을 할 시간이 왔다! 안드로이드에서는 Retrofit2와 OkHttp3를 사용해서 했었는데 과연 React에서는 어떤 것을 사용하는지 알아보다가 Ajax라는 것을 알게 되었고, 학습하기 위해 그 내용을 정리해본다. 1. Ajax란?AJAX는 Asynchronous JavaScript And XML로 해석하면, 비동기 자바스크립트와 XmL이다. 즉, 웹 페이지를 전체 새로고침하지 않고, 서버와 비동기적으로 데이터를 주고받아서 일부 내용만 동적으로 갱신할 수 있도록 하는 웹 기술이다. XMLHttpRequest 방식이 있고, fetch API 방식이 있는데 여기서는 fetch API로 설명하겠다.1-1. 사용 이유?1) 일부 영역만 동적으로 갱신-> 화면이 깜빡이지 않기 때문에 더..

개요reactstrap에서 className 속성을 통해 Bootstrap의 다양한 스타일을 적용할 수 있는데, 기존 템플릿 코드롤 보면서 이게 뭘까 하는게 많았는데 깔끔하게 속성들을 정리해보고 가자.1. 레이아웃이름설명container고정 폭 컨테이너container-fluid전체 너비를 차지하는 컨테이너rowFlexbox 행 생성col자동 크기 조정 열col-{size}-n특정 크기(sm, md, lg, xl, xxl)에서 n만큼 너비를 차지d-flexFlexbox 컨테이너 활성화d-inline-flex인라인 Flexbox 컨테이너d-block블록 요소 표시d-inline인라인 요소로 표시d-none숨김 처리 2, Flexbox 관련이름설명flex-row주축을 가로 방향(기본값)으로 설정flex-co..

개요프로젝트 코드를 분석하는데 Router에서부터 머리가 띵해졌다. 화면을 변경하는 건 알겠는데 도대체 어떤 원리로? 어떻게? 정리해야겠지. 1. React Router란?React Router는 React 애플리케이션에서 클라이언트 측 라우팅(Client-Side Routing)을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. React는 기본적으로 단일 페이지 애플리케이션(SPA, Single Page Application)이고, URL이 변경되더라도 페이지 전체를 새로고침하지 않고도 컴포넌트만 변경할 수 있도록 설계되어 있다. 여기서 React Router를 사용한다면 사용자가 특정 URL로 이동할 때 해당 URL에 맞는 컴포넌트를 렌더링한다. 1-1. React Router 필요성-> React..