개발 블로그

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

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

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

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

Next.js Caching해당 글은 Next.js 공식문서를 번역한 글입니다.참고) unstable_cache는 archive 되었고 이를 대신하는 실험중인 기능입니다. This API is currently experimental and subject to change. use cache는 캐시할 컴포넌트, 함수 또는 파일을 지정합니다. 파일 상단에 사용하여 파일의 모든 함수를 캐시할 수 있음을 나타내거나 함수 상단에 인라인으로 사용하여 함수를 캐시할 수 있는 것으로 표시할 수 있습니다. 이것은 실험적인 Next.js 기능이며, use client나 use server와 같은 native React 기능이 아닙니다.   Next.config.ts 파일에서 dynamicIO 플래그를 사용하여 use c..

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