React

리액트를 말하기전 먼저 자바스크립트에 대해서 간단하게 이야기하고 들어갈게요 🙋🏻‍♂️리액트가 자바스크립트 기반 으로 만들어진건 안 비밀이라고요?!? 설마 그것도 모르셨다고요?!?

React와 SPA(단일 페이지 애플리케이션) 간의 관계는 꽤 밀접해요. SPA는 전통적인 다중 페이지 애플리케이션(정적[Static] 웹페이지)과는 다르게 한 번에 하나의 HTML 페이지만 로드되고! 사용자가 페이지를 이동할 때마다 새로운 콘텐츠를

0️⃣세팅전 준비 Node.js 및 npm 설치 리액트 애플리케이션을 개발하기 위해서는 먼저 Node.js라는 것과 npm(Node Package Manager)이라는 것을 설치해야 해요.

JSX(JavaScript XML)는 JavaScript의 확장 문법으로, React에서 UI를 좀더 쉽고 직관적으로 구성하기 위해 사용됩니다.

0️⃣ 리액트의 컴포넌트란? 리액트에서 컴포넌트는 웹 UI를 구성하는 재사용 가능한 독립적인 모듈입니다. 각 컴포넌트는 자체적인 상태(state)와 렌더링 로직을 갖고 있으며, 이러한 컴포넌트들을 조합하여 복잡한 UI를 만들 수 있습니다. 리액트의 모든 페이지가 Co

0️⃣ 들어가며 >🐸 : React를 처음 접하는 분들에게는 Props와 State라는 단어가 헷갈리고 혼란스러울 수 있어요!!

React의 State(상태)는 React 컴포넌트 내에서 관리되는 데이터를 말해요.이 데이터는 컴포넌트가 렌더링될 때 변경될 수 있으며, 이 변경은 화면에 표시되는 내용을 업데이트하는 데 사용됩니다.

웹 애플리케이션을 개발할 때 사용자 경험을 향상시키기 위해 페이지 간의 전환을 관리하는 것은 매우 중요해요. 🐸 : 특히나 시리즈의 앞에서 말했듯 동적 웹페이지(SPA) 방식으로 자동하는 리액트는 초기에 html 파일을 한번만 불러온뒤 화면을 다시 그리기 때문에 라우

리액트 앱을 개발하다 보면 다른 페이지로 이동할 때 페이지 간 정보를 전달해야 하는 상황이 발생해요. 이때 동적 라우팅과 URL 매개변수를 활용하면 쉽게 정보를 전달하고 관리할 수 있어요. 이번 포스팅에서는 리액트에서 동적 라우팅을 어떻게 구현하는지 그리고 URL 매개

0️⃣ 들어가며 리액트 애플리케이션을 개발할 때 상태 관리는 매우 중요해요. 하지만 대규모 애플리케이션을 개발할 때, 특히 전역적인 상태값이 필수적으로 필요한 상황이 생기며 상태가 복잡해지면서 상태 관리를 위한 라이브러리를 사용하는 것이 좋습니다. >🐸 : 이번 포

Virtula DOM을 알기위해 먼저 DOM이란 뭔지 알아야한다. 0️⃣ DOM(Document Object Model) DOM은 문서 객체 모델이라고 하는데 결국은 브라우저에서 다룰 HTML 문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것 이라고 한

0️⃣ 들어가며, 오늘의 문제 >🐸 : 리액트에서 API로 받아온 json데이터나 여러 리스트(배열 안의 객체 등..) 데이터들을 표현하기위해 Map 함수를 사용하여 컴포넌트 혹은 JSX요소들을 랜더링 하다보면 다음과 같이 "key" prop ~ 형태의 Warning

0️⃣ 방법은!? >🐸 : React가 리렌더링 시 기존과 바뀐 부분을 알아내는 방법은 주로 Virtual DOM과 디프 알고리즘(diffing algorithm)을 통해 이루어져요. 이 과정은 다음과 아래와 같이 이루어집니다! 1. Virtual DOM의 생성 R

0️⃣ 들어가며 >🙋🏻 : 메모이제이션 이란 뭔가요? 🐸 : 메모이제이션은 쉽게 말해 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게하는 기술이에요.

React의 Suspense는 비동기 데이터를 처리하는 동안 컴포넌트를 일시적으로 중단(suspend)시키고, 데이터가 준비되면 다시 렌더링하도록 돕는 기능입니다. 이를 활용하면 로딩 상태 관리가 간결해지고, 코드의 가독성이 향상됩니다.먼저, Suspense를 사용하면