본문 바로가기

React

(5)

[React] 리액트 서스펜스?! (React Suspense) 최근 블로그 글을 읽어보다 리액트 서스펜스라는 개념을 알게 되었다. 이전까지 진행했던 프로젝트 및 앞으로 진행할 프로젝트에 적용하면 좋을 것이라고 생각해 알아보게 되었다. 🧐 React Suspense 란? 리액트의 서브펜스는 16.6 버전에서 실험적(experimental) 기능으로 추가되었고 18버전부터 공식적으로 정식 기능으로 지원하기 시작했다. 이 서스펜스를 이용하면 어떤 작업이 종료되기 전에 컴포넌트의 랜더링을 중단시켜 동시에 랜더링이 되게 한다던지, 다른 컴포넌트의 랜더링을 앞 순서로 이끌 수 있다. 예를 들어 (부모 컴포넌트 - 자식 컴포넌트1 - 자식 컴포넌트2) 처럼 컴포넌트들이 존재할 때 모든 컴포넌트가 비동기 작업을 포함하고 있다고 한다면 불분명한 비동기 동작의 수행 종료 시점으로 인..

[React] 라이프 사이클(Life Cycle ) 🧐 라이프 사이클이란? React는 컴포넌트 기반의 개발을 가능케하는 라이브러리이다. 컴포넌트를 이용하여 view의 부분 부분을 구성할 수 있는데 이 컴포넌트에는 view에 랜더링되기 전 준비 과정부터 사라질 때까지의 라이프사이클을 가진다. 우리는 이 라이프사이클을 다루며 사용자가 원하는 view를 보여준다. 라이프 사이클은 크게 마운트, 업데이트, 언마운트 세가지 부분으로 나눌 수 있다. 1. 마운트 DOM이 생성되고 브라우저에 나타나는 것을 마운트(mount)라고 한다. 2. 업데이트 다음과 같은 네가지의 경우에 컴포넌트를 업데이트를 한다. props의 변경 state의 변경 부모 컴포넌트의 리렌더링 this.forceUpdate로 강제 렌더링 트리거 3. 언마운트 컴포넌트를 DOM에서 제거하는 것을..

[React] 전역 상태 관리 맛보기 상태(state)란 UI에 반영하기 위해 유지해야할 값이다. 리액트에서는 컴포넌트에 저장한 데이터(상태)가 변경되면 그에 따라 UI가 자동으로 갱신된다. 따라서 리액트를 사용하면서 상태값을 효율적으로 관리하고 상태값에 따라 화면이 불필요하게 업데이트되지 않도록 주의해야 한다. 상태는 두가지로 구분할 수 있는데 지역상태와 전역상태이다. 지역상태의 경우 useState같이 컴포넌트 내에서 훅을 사용하는 것이다. 위 그림처럼 리액트는 단방향의 특성을 지니기 때문에 상위 컴포넌트로 상태를 전달할 수 없고, props로 하위 컴포넌트로 전달할 수 있다. 전역상태는 어떤 흐름에 얽메이지 않고 전역에서 사용가능한 상태를 말한다. 하나의 상태를 여러 곳에서 사용하기 위해서 어떻게든 상위의 컴포넌트에서 props로 전달..

[React] setState callBack 함수 SleepyWoods 프로젝트를 진행하면서 전체 채팅 기능을 구현했었다. 전체 채팅을 담당하는 Chat 컴포넌트에서 지역상태로 전체 채팅 데이터를 가지도록 했는데 코드를 보면 다음과 같다. const [chatDatas, setChatDatas] = useState([]); // 채팅 업데이트 const updateChat = (chat: chatType) => { ... chat.timestamp = calcTimeFromMs(chat.timestamp); // timestamp을 포멧팅하는 함수 호출 setChatDatas([...chatDatas, chat]); }; type chatType = { type: string; timestamp: string; nickname: string | numb..

[React] Lazy initialization SleepyWoods 프로젝트를 진행하며 전체 채팅 기능을 구현했었다. 전체채팅을 구현하면서 혹시 부득이한 상황이 발생해 새로고침이 되는 경우에 이전에 나눴던 이야기를 확인해야 하는 경우가 존재하지 않을까? 라는 생각에 휘발성으로 채팅 내역을 일시적으로 저장하기로 하였고, 현재 상황에서 Redis를 도입하기에는 일정적으로 무리가 있었기 때문에 세션 스토리지를 사용했습니다. 이전 채팅 내역을 초기에 가져오기 위해서 다음과 같이 코드를 작성했다. const [chatDatas, setChatDatas] = useState(() => { const sessionStorageChat = sessionStorage.getItem('chat'); return sessionStorageChat ? JSON.parse..

이전 1 다음

티스토리툴바