개발 블로그

React 깊이 이해하기(5) - React hooks

useEffect useEffect를 단순히 생명주기 메서드를 대체하기 위해 만들어진 훅이라고 생각할 수 있지만,보다 정확히 정의를 하자면 useEffect의 effect는 side effect, 즉 부수효과를 의미하며,컴포넌트가 렌더링 된 후에 어떠한 부수효과를 일으키고 싶을 때 사용하는 hook이다.  Effect는 렌더링 자체에 의해 발생하는 부수효과를 특정하는 것으로, 특정 이벤트가 아닌 렌더링에 의해 직접 발생합니다.(렌더링 프로세스 중 commit 단계가 끝난 후에 화면 업데이트가 이루어지고 나서 실행)  기본 형태는 아래와 같습니다.function MyComponent() { useEffect(() => { // 이곳의 코드는 *모든* 렌더링 후에 실행됩니다 }); return ;..

React 깊이 이해하기(4) - useState

React의 대표 hooks - useState 리액트 함수 컴포넌트에서 가장 중요한 개념은 바로 훅입니다.훅은 클래스 컴포넌트에서만 가능했던 state, ref등의 리액트의 핵심적인 기능을 함수에서도 가능하게 만들었고,무엇보다 클래스 컴포넌트보다 간결하게 작성할 수 있어 훅이 등장한 이후로 대부분의 React 코드는 함수 컴포넌트로 작성되고 있습니다.이러한 hook중 가장 대표적인 useState에 대해서 상세하게 알아보려합니다.      1. useState는 Closure를 통해 상태관리를 한다. React의 가장 기본적인 훅은 당연 useState 일것입니다.useState는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅입니다.  만약 useState를 사용하지 않..

React 깊이 이해하기(3) - React Rendering

리액트 렌더링렌더링이란 단어는 많이 듣고 사용하지만, 명확히 개념을 설명하기는 어려워 정리를 해보려고합니다.브라우저에서의 렌더링은 HTML과 CSS리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 말하고,리엑트에서의 렌더링은 브라우저의 렌더링에 필요한 DOM tree를 만드는 과정을 말합니다.좀 더 상세하게 말하자면 React application tree안에있는 모든 컴포넌트들이 자신의 props와 state를 가지고어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정을 말합니다.    re-rendering 리엑트에서 렌더링은 유저가 처음 application에 진입하면 최초 렌더링이 발생합니다. (root component 호출)import Imag..

React 깊이 이해하기(2) - Life cycle

리엑트의 생명주기 / 라이프 사이클생명주기 메서드가 실행되는 시점은 크게 3가지로 나눌 수 있습니다. mount : 컴포넌트가 마운팅(생성)되는 시점update : 이미 생성된 컴포넌트의 내용이 변경(업데이트)되는 시점unmount : 컴포넌트가 더 이상 존재하지 않는 시점    1. class component의 Life cycle  render()render는 React Class Component의 유일한 필수값으로 쓰입니다.이 함수는 컴포넌트가 UI를 렌더링하기 위해서 쓰이고, mount와 update 과정에서 일어납니다. render() 함수는 항상 순수해야하며, 부수 효과가 없어야 한다는 것이 특징입니다. (no side effects)순수해야 한다는 것은 입력값이 있으면 항상 똑같은 결과물을..

Virtual DOM  가상돔  React의 대표적인 특징 중의 하나는 virtual DOM이 있다는 것입니다.가상 DOM을 이해하기에 앞서 DOM과 browser의 rendering과정부터 알아야 합니다. DOM (Document Object Model) : HTML 문서 구조를 계층구조의 객체로 표현HTML로 구성된 웹 페이지와 프로그래밍 언어(ex. JavaScript)를 연결시켜 주는 역할  브라우저의 렌더링과정은 아래와 같습니다.브라우저가 사용자가 요청한 주소를 방문해 HTML파일을 다운로드한다.서버로부터 html 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱 하며 태그와 속성들을 DOM tree형태로 메모리에 저장한다.2번 과정에서 css 링크나 스타일 태그를 만나면 CSS..

React Query -  Stale time / Cache time / Refetching / Prefetching   1) React Query 사용 기본2) isFetching vs isLoading3) Devtools 개발자 도구4) Stale Time5) Refetching6) Prefetching React Query란?server data cache를 관리React 코드에 server data가 필요할 때 fetch나 axios를 통해 서버로 바로 이동하지 않고 React Query cache를 요청  ✔️ react query의 역할클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지관리데이터를 관리하는 것은 react query이지만, 서버의 새 데이터로 캐시를 업데이트하는 시..