Front-end (13) 썸네일형 리스트형 Zustand란? React 전역 상태 관리 쉽게 이해하기 React로 개발하다 보면 여러 컴포넌트에서 같은 데이터를 사용해야 할 때가 있다.예를 들어 로그인한 사용자 정보, 다크모드 여부, 장바구니 목록, 검색 조건 같은 데이터는 한 컴포넌트에서만 사용하는 것이 아니라 여러 화면에서 함께 사용할 수 있다.이런 데이터를 관리할 때 사용하는 것이 전역 상태 관리이고, Zustand는 React에서 전역 상태를 쉽게 관리할 수 있게 도와주는 라이브러리이다. 1. Zustand란?Zustand는 React에서 사용하는 상태 관리 라이브러리이다.Redux처럼 전역 상태를 관리할 수 있지만, 코드가 훨씬 짧고 사용 방법이 간단하다.npm install zustand2. 왜 Zustand를 사용할까?React에서는 기본적으로 useState를 사용해서 상태를 관리한다.c.. React Router, Rest 호출(Axios) React에서 URL에 따라 컴포넌트를 렌더링하는 방법과 Axios를 이용한 REST API 호출, 그리고 Material-UI를 이용한 주소 검색 화면을 만들어봤다. 1. React RouterReact Router는 URL에 따라 다른 컴포넌트를 보여줄 때 사용하는 노드 모듈이다.예를 들어 아래처럼 동작한다./ → Home 화면/editor → Editor 화면/grid → Grid 화면React Router 구조사용자가 URL 이동 ↓BrowserRouter가 감싸고 있음 ↓Switch가 현재 URL 확인 ↓Route에 매핑된 컴포넌트 렌더링메뉴 만들기 editor grid home화면에서는 이런 식으로 보인다. BrowserRout.. [React] 리액트 컴포넌트 생명주기(Lifecycle) 총정리: 클래스형부터 useEffect 훅까지 리액트(React) 개발의 핵심 기초이자 면접 단골 질문인 컴포넌트 생명주기(Lifecycle API)에 대해 알아보겠습니다.리액트 컴포넌트는 브라우저 화면에 나타나고, 데이터가 바뀌어 업데이트되고, 화면에서 사라지는 일련의 과정을 거칩니다. 이 흐름을 완벽히 이해해야 자원 낭비를 줄이는 코드 최적화와 올바른 데이터 연동(Side Effect) 처리가 가능합니다. 1. 리액트 생명주기 한눈에 보기 (개념도)리액트 클래스형 컴포넌트의 전체적인 생명주기는 크게 Mount(생성), Update(수정), Unmount(소멸) 3가지 단계로 나뉩니다. 전체 흐름을 시각적으로 나타낸 다이어그램을 먼저 확인해 보세요. 🔄 핵심 흐름 요약Mount (생성): ReactDOM.render() ➔ constructor.. [React] JSX, Props & State 1. JSX (JavaScript XML) 개념 요약JavaScript XML의 약자로, 페이스북에서 만든 자바스크립트 확장 문법입니다.HTML 마크업과 유사하게 작성하여 가독성을 높이며, 내부적으로는 Babel 등을 통해 순수한 자바스크립트(React.createElement) 코드로 컴파일됩니다.공식 문서 참고: 리액트 공식 레거시 문서 - JSX 소개컴파일 전후 비교 코드tsx// 1. 우리가 실제로 작성하는 JSX 문법const element = ( Hello, world! );// 2. Babel에 의해 컴파일된 실제 자바스크립트 형태const element = React.createElement( 'h1', { className: 'greeting' }); 💡 참고: *.js.. [React] 리액트 Basic 1. 리액트 + 타입스크립트 프로젝트 생성 npm create-react-app my-app –template typescript https://create-react-app.dev/docs/getting-started/ or https://create-react-app.dev/docs/adding-typescript https://velog.io/@qortmdalsdl/react-scripts-feat.-CRA 2. 리액트 프로젝트 구조 package.json에는 dependency들이 정의되어 있고 start, build, test, eject script 들이 들어있다. cf. package-lock.json이 하는 역할이 무엇일까? https://hyunjun19.github.io/2018/03.. [React] React란 React Overview 리액트( React ) 란리액트는 페이스북에서 제공해주는 프론트엔드 라이브러리이다. 또한 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다. 리액트를 왜 사용하는가?사실 리액트를 사용하지 않아도 얼마든지 웹페이지를 HTML, CSS를 이용해 만들 수 있다.그러나 HTML 과 CSS등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지않다.리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들어 줄 수 있다.리액트의 특징1. 컴포넌트리액트는 컴포넌트 기반의 라이브러리이다.UI를 하나의 큰 덩어리로 생각한다면 컴포넌트는 그 덩어리를 이루는 아주 작은 요소들이라고 생각하면 된다.그런 요소들을 설계해서 쌓아 .. [TypeScript] API Fetch 하나로 합치는 작업 - 기록용 기존 Api호출 Fetch들이 나누어져있었다. 그거를 한개로 통합해야될 필요성이 있어서 한개로 합치게되었다. 먼저 예시로 어떻게 수정이되었는지 기록용으로 남긴다. 로그인부분으로 예를 들겠다. OTP로 로그인시 const resp = await api.call(`auth`, `mfa`, otp.value); 이렇게 요청을 하는데 ✅ /* Start: OTP입력 */ if (!dialogsStore.alertFlag) { if (isNil(otp.value.otp)) { pushNoti(`error`, `MGS.OTPINPUT`); /* OTP를 입력해 주세요 */ return; .. [TypeScript] 옵셔널 프로퍼티(optional property) ✅옵셔널 프로퍼티(optional property)객체의 속성 중 필수가 아닌, 있어도 되고 없어도 되는 속성값을 할당하지 않아도 문제가 없다.인터페이스나 타입 정의에서 물음표 ?를 사용하여 표시한다. interface Data { check?: boolean; // check는 있어도 되고 없어도 됨} const d1: Data = { check: true }; // 정상, ok가 true (boolean 타입)const d2: Data = { check: false }; // 정상, ok가 false (boolean 타입)const d3: Data = { check: undefined }; // 정상, ok가 undefined (옵셔널이기 때문에 허용)const d4: Dat.. 이전 1 2 다음
