본문 바로가기
반응형

WebDev/React-Next12

React 라이프 사이클(생명주기)을 공부하자 feat: useEffect() 리액트의 관점에서 본 생명주기를 알아보고자 한다.우선 설명은 함수 컴포넌트의 useEffct훅으로 설명할 것이다.리액트는 useEffect는 생명주기를 관리한다. 리액트 생명 주기는 컴포넌트가 생성, 업데이트, 제거되는 과정이다.이를 통해서 컴포넌트의 상태를 관리하거나 특정 작업을 수행할 수 있는데,리액트 컴포넌트 생명 주기는 크게 세 단계로 나뉜다.LifeCycle마운트컴포넌트가 처음으로 렌더링 되는 순간초기화: 컴포넌트의 상태와 props가 초기화렌더링: 컴포넌트의 JSX가 처음으로 렌더링업데이트컴포넌트가 리렌더링되는 단계로써 props나 state가 변경될 때 발생렌더링: 변경된 상태나 props에 따라 컴포넌트가 다시 렌더링클린업 함수 호출: 새로운 useEffect가 실행되기 전에 이전 useE.. 2024. 5. 30.
React(리액트)의 렌더링 방식에 대해 알아보자 HTML-CSS-JS를 거쳐 리액트를 쓰고 넥스트 까지 쓰게 되는 요즘 넥스트를 쓰면 전부 다 할 수있다는 착각에 빠져 살게 되는 것 같았다.그리고 AI의 빠른 발전으로 인해 동작은 하지만 머리를 갸우뚱하게 되는 코드도 몇번 보았고, 1년도 안 된 주니어지만 점점 더 바보가 되는 것 같다고 생각했다.하지만 기초가 제일 중요한 것은 빠질 수 없는 것이고,단순 사용을 넘어 동작 방식의 이해와 장점을 알아보고자리액트의 렌더링 방식에 대해 다시금 정리해보려고 한다.React(리액트)의 렌더링 방식리액트의 동작방식 이전에 기본적인 웹브라우저의 동작 방식은 다음과 같다.critical rendering pathHTML을 DOM(문서객체모델, 트리형)으로 변환 / CSS를 CSSOM로 변환한다. render tree.. 2024. 5. 29.
state / props / component / rendering 깔끔하게 사용하기 state 올바른 초기 값 설정을 하자 렌더링 오류가 발생할 수도 있다 무한 루프에 빠질 수도 있다 타입 불일치가 생길 수 있다 초기값이 없다면 undefined 업데이트 되지 않는 값은? 상태로 바꾸기 외부로 추출하기 플래그 값은 상태로 만들지 말고 컴포넌트 안에서 표현식으로 만들자 useState를 대신해서 useRef를 사용할 수 있다 컴포넌트 전체 수명과 동일하게 자속된 정보를 일관적으로 가진다면 useRef를 사용해서 리렌더링 되지 않는 상태를 만들 수 있다 연관된 상태를 단순화 하자(ex)로딩 성공 실패) 하나의 state로 묶기 이전 상태를 활용해보자 prevState 사용(리액트 공식문서 권장사항) props 불필요한 props 복사 및 연산 props 바로 사용 연산된 값을 props로 .. 2024. 2. 28.
실시간 스트리밍 출력하기 RTSP / WS RTSP(Real-Time Streaming Protocol) 실시간 데이터 전송을 위한 네트워크 프로토콜 RTSP 프로토콜은 오디오나 비디오와 같은 미디어 데이터를 실시간으로 스트리밍할 때 주로 사용(나의 경우 실시간 스트리밍) RTSP 주요 특징 제어 기능 RTSP는 VCR과 같은 제어 기능을 제공 클라이언트는 서버에게 미디어 스트림의 재생, 일시정지, 정지, 앞으로 빨리감기, 뒤로 빨리감기와 같은 요청 가능 실시간 전송 미디어 데이터는 실시간으로 전송되고 재생 라이브 방송이나 실시간 모니터링 등의 용도로 사용 서버-클라이언트 구조 RTSP는 서버-클라이언트 구조 클라이언트는 RTSP 요청을 통해 서버에게 미디어 스트림의 제어를 요청 서버는 이에 응답하여 요청된 작업을 수행 다양한 전송 프로토콜 지원.. 2023. 12. 12.
넥스트 getServerSideProps / getStaticProps / getStaticPaths 버전이 14까지 나왔다던디... 너무 빠르다 천천히 공부 하는 중! getServerSideProps getServerSideProps는 서버 사이드 렌더링을 위한 Next.js의 데이터 가져오기 함수 이 함수는 각 요청마다 서버에서 실행되며, 요청 시점의 데이터를 페이지에 주입 매 요청마다 결과가 달라질 수 있는 데이터를 다루는데 적합 export async function getServerSideProps(context) { // 데이터를 가져오는 코드 return { props: { /* 페이지 컴포넌트에 전달될 props */ }, }; } 또한 context 매개변수를 받는데, context 객체는 다음과 같은 속성을 포함 params: 동적 라우트의 매개변수를 포함 req: IncomingMe.. 2023. 11. 21.
코드스플리팅의 개념 리액트 프로젝트에서 배포할 때 빌드라는 작업을 거쳐야 한다. 빌드: 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지, 공백 등을 제거하여 파일 크기를 최소화 하고 코드의 트랜스파일 작업도 하는데 이 작업은 웹팩이라는 도구가 담당 코드스플리팅: 파일을 분리하는 작업. EX) A, B, C 페이지에서 A페이지에 방문했다면 B, C의 컴포넌트 정보는 필요없다. 하지만 SPA로 개발된 A, B, C의 페이지가 있다면 리액트는 세 페이지의 컴포넌트가 모두 한 파일에 저장. 로딩도 오래걸리고, ux도 안 좋아질 것이며, 트래픽도 증가 됨 이러한 문제를 해결하는 것이 코드 스플리팅 React.lazy(유틸 함수)와 Suspense(컴포넌트)를 사용하면, 간단하게 코드 스플리팅 구현이 가능. React.lazy는.. 2023. 10. 10.
반응형

티스토리툴바