React 3

“React는 게임엔 안 맞다.” 그래서 만들어봤습니다.

React로 만든 “하리니 오락실” 제작 썰“아니, 프론트 개발자가 오락실을 만든다고?”네, React로요. 그리고 또 1등했습니다. 😏 하리니 오락실의 정체하리니 오락실은 영끌 앱 안의 미니게임 센터예요.“앱 안에 오락실이 있다고요?”네, 광고도 노출하고, 포인트도 쓰고,유저도 붙잡는 일석삼조 프로젝트입니다.목표 요약하면 이렇습니다 👇리텐션 확보 — “하리니 보러 매일 출근각”광고 구좌 확보 — “죽었을 때 광고 보면 부활 (상술의 미학)”포인트 소진 — “이왕이면 즐겁게 소비하게 하자”체류시간 확보 — “유저가 앱에서 못 나가게 하자 😈”PM님이 한 줄로 정리했습니다.“유저의 시간을 뺏자. 착하게.” 🎮 게임 두 개, 미친듯이 단순하게 React로 FPS 떨어지는 순간, 그건 게임이 아니라 슬..

React 2025.11.12

React - 리엑트의 랜더링 과정

렌더링 - 컴포넌트에게 현재 Props와 State에 기반하여 UI에서 어떻게 보여지고 싶은지 알려달라고 요청하는 과정이다. 크게 3개의 단계로 나뉜다.렌더링 트리거 (손님의 주문을 주방으로 전달)컴포넌트 렌더링 (주방에서 주문 준비하기)DOM에 커밋 (테이블에 주문한 요리 내놓기) 1단계: 렌더링 트리거컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.1) 컴포넌트의 초기 렌더링인 경우 2) 컴포넌트의 state가 업데이트된 경우 초기 렌더링  앱을 시작할 때 초기 렌더링을 트리거해야 한다, 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메서드를 호출하면 이 작업이 완료된다.import Image from './Image.js';import { create..

React 2024.05.11

React - 상태관리 (Zustand 그외 Redux...)

리액트 상태 관리 라이브러리 Redux: Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나. 애플리케이션의 전역 상태를 효과적으로 관리하고 변경 사항을 추적하기 위해 사용된다. Zustand: Zustand은 리액트 상태 관리를 위한 간단하고 직관적인 라이브러리. Zustand은 React Hooks와 함께 사용되며, 전역 및 로컬 상태를 관리하고 리액트 컴포넌트 간의 상태 공유를 용이하게 해준다. Recoil: Recoil은 페이스북에서 개발한 리액트 상태 관리 라이브러리이다. Recoil은 상태의 원자성과 종속성 추적을 위한 간단한 API를 제공하며, 상태를 효과적으로 관리하고 여러 컴포넌트 간에 공유할 수 있다. 이중에서 이번에 자세히 얘기할건 이번 프로젝트에서 도입될 Zustand 라..

React 2023.05.23
반응형