React

React는 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리입니다.React는 싱글 페이지 애플리케이션(Single Page Application, SPA) 개발에 주로 사용되며, Virtual DOM과 JSX라는 독특한 개념을 사용하여 동작합니

JSX (JavaScript XML)은 JavaScript 언어의 확장으로, 개발자들이 JavaScript 코드 내에서 HTML과 유사한 구문을 작성할 수 있도록 합니다. 이는 사용자 인터페이스를 구축하는 인기있는 JavaScript 라이브러리인 React에서 널리 사

리액트에서 컴포넌트(Component)란 UI를 구성하는 독립적인 모듈입니다. 컴포넌트는 재사용이 가능하며, 각 컴포넌트는 자체적인 UI와 상태(state)를 가집니다.컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스 컴포넌트(Class Com

리액트에서 state 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 합

리액트에서 이벤트 핸들링은 일반 HTML과 비슷하게 처리됩니다. 이벤트 핸들러는 JSX 요소의 props로 전달되며, 함수의 형태로 작성됩니다. 이벤트 핸들러 함수 정의이벤트 핸들러 함수를 이벤트에 연결이벤트 핸들러 함수에서 상태 업데이트HTML의 onclick은 리액

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공 합니다.리액트 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 발생 할 수 있습니다.특정 엘리먼트의 크기를 가져오는 경우스크롤바 위치를 가져오거나 설정하는 경우인풋

리액트에서 배열과 맵은 컴포넌트 렌더링에서 매우 중요한 역할을 합니다. 이들은 데이터를 다룰 때 많이 사용되는 자바스크립트의 데이터 구조입니다.배열은 순서가 있는 데이터의 집합으로, 각 요소는 인덱스를 가지고 있습니다. 맵은 키와 값을 가지는 구조로, 키와 값을 쌍으로

리액트 v16.8에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할수 있는 useState, 그리고 렌더링 직 후 설정하는 useEffet등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있도록 함.Hook은 함수 컴포넌

리액트에서 컴포넌트를 스타일링 할 때는 다양한 방식을 사용할 수 있습니다. 회사마다 요구하는 방식이 다르고 개발자마다 각자 취향에 따라 선택해서 사용할 수 있습니다.일반 CSS : 가장 기본적인 방식Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문

라우팅이란? 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미 합니다.웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있습니다.예를 들어 블로그를 만드는 경우를 가정해 보면, 글쓰기 페이지 : 새로운

axios는 자바스크립트에서 사용되는 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js에서 모두 사용할 수 있습니다.axios는 XMLHttpRequests 요청을 자동으로 생성하고, HTTP 요청과 응답을 자바스크립트 객체로 변환하여 사용자가 더 쉽게 HTT

서버와 통신을 위해 API 만들기

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 입니다.로그인 정보, 애플리케이션의 환경설정 및 테마 설정 등의 정보가 해당 됩니다.리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context AP

리덕스(Redux)는 React 애플리케이션에서 상태를 관리하기 위한 라이브러리입니다.리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 오직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를

여러 컴포넌트에서 비슷한 기능을 고유할 경우, 이를 여러분만의 Hook으로 작성하여 로직을 재사용 할 수 있습니다.

Material-UI는 React 애플리케이션을 위한 UI 라이브러리로, Material Design 컨셉에 기반하여 디자인된 React 컴포넌트들을 제공합니다. Material-UI를 사용하면 UI 개발이 더 쉽고 빠르게 이루어질 수 있습니다.Material-UI를

리액트와 파이어베이스를 이용한 이미지 업로드 : React image upload (feat.Firebase)

FE와 디자인 팀의 소통을 위해 디자인 시스템을 적용하고 한눈에 볼 수 있는 Storybook을 만들어 디자인팀에게 제공하고자 디자인 시스템 적용기를 써보고자 한다.비즈니스 로직이나 상태에 대한 관리는 상위에서 내려받는다.특정 컴포넌트가 관심사를 가지게되면 공통으로써의

최근 네이버 재직자님의 스터디를 계기로 React Query에 관심이 생겨 개념과 활용법을 정리해보려 한다.자동 캐싱 & 재사용• 동일한 쿼리를 여러 컴포넌트에서 사용할 때 데이터를 자동으로 캐싱하고 재사용합니다.• 덕분에 불필요한 네트워크 요청을 줄일 수 있습니다.자