본문 바로가기

🌳Frontend/react33

React에서 state를 정의할 때 고려해야 할 점 (feat. SSOT) 해당 게시글은 우아한 타입스크립트 with 리액트 10장을 읽고 정리한 글 입니다. React에서 State 란? - 시간이 지나면서 변할 수 있는 동적인 데이터 - 렌더링에 영향을 줄 수 있는 동적인 데이터 리액트 앱 내에서의 상태는 지역 상태, 전역 상태, 서버 상태 로 분류할 수 있습니다. 리액트 API만 으로도 상태를 관리할 수 있지만, 성능 문제가 발생하거나 규모가 커져 복잡해지면 Redux, MobX, Recoil 과 같은 외부 상태 라이브러리를 주로 활용합니다. 특히나, 컴포넌트 간의 상하관계 사이에서 상태 전달을 위해 과도한 Props drilling 을 막고자 사용합니다. React 에서 State 를 정의할 때 고려해야 할 사항 리액트에서 state가 변하게 되면(업데이트가 되면) 리렌.. 2024. 2. 25.
React 컴포넌트 타입인 ReactElement vs JSX.Element vs ReactNode 차이와 예시 컴포넌트의 props에 컴포넌트를 넘겨야 할 때, props의 이름과 컴포넌트의 타입을 선언해주어야 한다. import { JSX, ReactElement, ReactNode, useEffect, useState } from 'react' interface Props { component: ReactElement component1: JSX.Element component2: ReactNode } 하지만 이 컴포넌트의 타입은 `ReactElement` , `Element` , `ReactNode` 세가지가 있으며, 세가지 모두 리액트의 요소를 나타낸다. 이 타입들의 차이는 무엇이 있을 지 알아보자. ReactElement 리액트에서는 JSX 문법으로 UI를 표현하고, 트랜스파일러는 JSX문법을 crea.. 2024. 2. 24.
Next.js에서 Firebase 파이어베이스로 구글 로그인 기능 구현 2023.10.14 - [🌳Frontend/react] - Next.js 와 파이어베이스(Firebase) 연동하기 Next.js 와 파이어베이스(Firebase) 연동하기 서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자. 파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하 yzlosmik.tistory.com Next.js app과 파이어베이스 연동은 이전글을 참고해주세요. 🔥 파이어베이스 콘솔에서 Authentication 셋팅 추가 제공업체에 Goggle 을 클릭해주자. 프로젝트 지원 이메일은 본인 이메일로 셋팅하면 됩니다. 😎 소스코드 firestore은 이전글에서 셋팅한 firestore 설정파일 입니다. fire.. 2023. 10. 14.
Next.js 와 파이어베이스(Firebase) 연동하기 서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자. 파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하게 서버를 구성하고 싶을 때 이용하기 좋다. 🔥 파이어베이스 시작하기 1.1 파이어베이스 프로젝트 시작하기 파이어베이스 콘솔 로 들어가 프로젝트를 만들어줍시다. 1.2 앱 만들기 앱을 만들면 파이어베이스 SDK 가 나오는데 그 값을 저장해둡시다. 🌩 Next.js 프로젝트에 파이어베이스 세팅 1. firebasedb.ts 파일 생성 파일 키들은 노출되면 안되므로, 환경변수로 보호해줍니다. Next.js 에서의 환경변수는 프로젝트 root에 .env.local 이름으로 파일을 생성하고, NEXT_PUBLIC_키이름 = valu.. 2023. 10. 14.
728x90
반응형

티스토리툴바