Frontend/React3 브라우저의 렌더링 과정과 React의 최적화 기법 브라우저의 렌더링 과정과 React의 최적화 기법웹 애플리케이션이 사용자에게 화면을 제공하는 과정은 여러 단계로 이루어진다. 특히 브라우저가 HTML, CSS, JavaScript를 처리하여 화면을 그리는 과정은 성능 최적화와 직결되며, React와 같은 라이브러리는 이러한 과정을 최적화하는 다양한 기법을 제공한다.1. 브라우저의 렌더링 과정웹페이지를 불러오는 과정에서 브라우저는 다음과 같은 순서로 리소스를 처리한다.HTTP(S) 요청 및 리소스 다운로드사용자가 특정 URL을 입력하면, 브라우저는 해당 서버와 HTTP(S) 프로토콜을 통해 통신하고 필요한 HTML, CSS, JavaScript, 이미지 등의 리소스를 다운로드한다.HTML 파싱 및 DOM(Document Object Model) 생성브라우.. 2025. 1. 31. 리액트 useEffect 제대로 이해하고 똑똑하게 사용하기 - useEffect의 정의 useEffect는 매일 사용하는 Hooks 중 하나이고, 동작 방식을 어느 정도 이해하고 있다고 생각하지만 제대로 알고 있다고 말하기에는 마음에 걸리는 것들이 많은 Hook 이기에, 제대로 정리해보고자 한다. 모던 리액트 Deep Dive 에서는 useEffect의 정확한 정의를 아래와 같이 말한다. useEffect는 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다. 우리가 일반적으로 이야기 하는 useEffect의 특징, 즉 의존성 배열이 변경되면 콜백함수를 실행한다, 의존성 배열이 빈 배열인 경우 컴포넌트가 마운트 될 때 실행되고, useEffect가 반환하는 클린업 함수는 컴포넌트가 언마운트 될 때 실행된다 등의 특징들을 한 문장으로 설명하려면, 결국 컴.. 2024. 4. 3. 리액트 useState 똑똑하게 쓰기 - lazy Initialization (게으른 초기화) 리액트를 사용하는 프론트 개발자라면 수없이 써봤을 useState 훅에 대해 새로운 사실을 하나 알게 되어 포스팅을 해보려한다. useState의 initalState argument useState훅의 initalState argument 즉, 훅을 호출할때 state의 초깃값으로 전달하는 인수로 값 뿐 아니라, 값을 리턴하는 함수를 넣을 수도 있다. //아래와 같이 초깃값으로 값을 넣을 수도 const [ stateValue, setStateValue ] = useState('defaultValue') //아래와 같이 초깃값으로 값을 리턴하는 함수를 넣을 수도 있다 const [ stateValue, setStateValue ] = useState(() => 'defaultValue') 이와 같이 u.. 2024. 3. 27. 이전 1 다음 반응형
