React 썸네일형 리스트형 React 기본 제공 컴포넌트 Suspense, Fragment 내장 컴포넌트 React는 특별한 역할을 수행하도록 설계된 내장 컴포넌트가 있다. 기본으로 제공되는 컴포넌트의 역할은 다양한 문제나 요구 사항을 해결하게 도와주며, 개발을 돕기 위한 도구나 특정 문제에 대한 해결책, 성능 최적화를 위한 도구 등이 포함된다. 불필요한 div태그의 사용을 줄여주는 , 비동기 요청을 통해 로딩중일 때의 화면을 보여줄 때 사용하는 등 개발시 자주 사용되는 몇 가지 기본 내장 컴포넌트를 알아보려고 한다. 주요 내장 컴포넌트 Fragment 는 React의 내장 컴포넌트 중 하나로, 주로 여러 컴포넌트나 요소를 그룹화하는 데 사용된다. 의 가장 큰 특징은 불필요한 DOM 노드를 생성하지 않는다는 것이다. 주요 특징 DOM 노드를 추가하지 않는다: Fragment는 렌더링 결과에 직.. 더보기 Virtual DOM 훑어보기 Virtual DOM이란? Virtual DOM은 "가상의 문서 객체 모델"을 의미한다. DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 트리 형태의 데이터 구조로 이루어져 있는데, Virtual DOM은 이 DOM의 가벼운 복제본이라고 볼 수 있으며, 메모리 내에 존재하므로 실제 DOM보다 빠르게 조작할 수 있다. 작동 방식 추상화된 DOM 표현: Virtual DOM은 메모리 내에서 실제 DOM의 트리 구조를 추상화하여 표현한다. 각 노드는 JavaScript 객체로 표현되며, 실제 DOM에 직접적인 영향을 주지 않는다. 변화 감지: 사용자 상호작용이나 데이터 변경으로 인해 UI가 변경될 때마다 새로운 Virtual DOM 트리가 생성된다. 이 새 트리는 이전 Virtu.. 더보기 React, Vue, Angular 비교하기 React, Vue, Angular 비교하기 React, Vue, 그리고 Angular는 현대 웹 개발에서 가장 널리 사용되는 FrontEnd 프레임워크 및 라이브러리들 중 하나이다. 위 세가지를 통틀어 FrontEnd 삼대장이라고도 많이 불리는데 각각의 특징은 무엇이고 어떤 차이점이 있는지 기록해보려고 한다. React (Library) 제작 : Facebook (Meta) 사이트 : https://react.dev/ Facebook에서 개발하고 관리하는 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위해 설계 되었다. React는 컴포넌트 기반의 UI 구축에 중점을 둔 라이브러리며, Virtual DOM을 활용해 빠른 렌더링 성능을 제공한다. 특징 컴포넌트 기반 구조: Re.. 더보기 효과 만들기 - 1. 로딩 효과 만들기 효과 만들기 FrontEnd 개발을 하다보면 API를 적용하는 컴포넌트나 반복적인 작업을 하기 위한 컴포넌트등이 있지만, 가장 기본적인 형태의 독립적이고 재사용이 가능한 컴포넌트들이 있다. 예를 들어, 로딩중인 상태를 알려줄 수 있는 컴포넌트나, 데이터를 가져오기 직전의 데이터 표, 이미지등의 영역을 잡아 보여줄 수 있는 스켈레톤, 가장 많이 사용하고 기본적인 버튼, 입력 컴포넌트등이 있다. 이런 컴포넌트는 외부 라이브러리를 이용하여 사용할 수 있지만 직접 만들어보며 어떤 구조로 컴포넌트가 이루어져 있는지, 이벤트를 어떻게 넘겨주면 좋은 건지 이해하고 라이브러리에 너무 의존하지 않기 위해서 직접 간단한 컴포넌트를 만들어보기로 했다. 어떻게 만들까 처음엔 가장 기본적인 HTML로 만들까 고민을 했었지만, .. 더보기 라이브러리, 프레임워크 정확히 구분하기 (feat. React) FrontEnd 개발을 하게 되면 항상 마주치는 라이브러리, 프레임워크가 있다. FrontEnd 개발 시 가장 많이 듣는 3대장 React, Vue, Angular 부터 시작해서 날짜, 시간등을 쉽게 사용할 수 있게 해주는 Moment.js, day.js, DOM을 조작하여 이벤트나 여러 효과를 쉽게 구현할 수 있도록 해주는 JQuery같이 많은 오픈 소스를 사용하면서 어느 것은 라이브러리, 어느 것은 프레임워크지 궁금해지기 시작했다. 그래서 이번 기회에 둘의 차이점은 무엇이고 지금 내가 가장 많이 사용하는 React는 둘 중 어느 것에 속하는지 알아보고 그 내용을 정리해서 남기기로 했다. 라이브러리(Library) 자바스크립트 라이브러리란 특정 작업이나 기능을 수행하기 위한 자바스크립트 코드의 모음이다.. 더보기 React의 클래스 컴포넌트와 함수형 컴포넌트가 뭘까? React : 클래스 컴포넌트, 함수형 컴포넌트 클래스 컴포넌트 클래스 컴포넌트는 React의 전통적인 컴포넌트 작성 방법이다. 클래스 컴포넌트는 ES6의 클래스를 활용하며, 컴포넌트의 상태(state)를 가질 수 있다. 또한, 라이프사이클 메소드를 활용할 수 있어 상태 업데이트 또는 컴포넌트 라이프사이클에 따른 특정 동작을 구현할 수 있게 되며, componentDidMount, componentDidUpdate, componentWillUnmount 등의 메소드를 제공한다. 라이프 사이클 Mounting : 컴포넌트 인스턴스가 생성되어 DOM에 삽입되는 단계 constructor(): 컴포넌트가 생성될 때 호출되는 메소드로, 초기 state를 정의하거나 메소드를 바인딩하는 등의 작업을 수행한다. st.. 더보기 React - 고차컴포넌트(HOC) 알아보기 고차 컴포넌트(HOC, Higher Order Component) 고차 컴포넌트(HOC, Higher Order Component)란? 고차 컴포넌트는 React에서 사용되는 기술로써 React API 일부가 아닌 React의 구성적 특성에서 나오는 패턴이다. 고차 컴포넌트는 컴포넌트의 재사용, 로직 추상화, 상태 관리 등에 유용하게 사용되는 패턴인데, 이는 자바스크립트의 고차 함수(Higher-Order Function) 개념에서 비롯된 것으로 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수이다. 고차 컴포넌트의 목적 코드 재사용: 리액트 컴포넌트는 독립적인 단위로 기능을 캡슐화한다. 이로 인해 컴포넌트 간에 상태나 메소드를 공유하는 것이 어려울 수 있는데, 고차 컴포넌트는 이 문제를 해결.. 더보기 React - useState()를 알아보자 React - useState() useState()는 React를 처음 접하게 되면 가장 먼저 접하게 되는 hook 중 하나라고 생각한다 가장 간단한 설명으로는 상태를 저장하여 관리할 수 있는 hook이라고 알고 있지만 useState가 어떤 식으로 동작하는지, 어떻게 상태를 관리하는지는 자세하게 알아보려고 하지 않았던 것 같다 그래서 이번기회에 useState()가 정확하게 어떤건지, 어떤 역할을 하고 어떻게 구성이 되어있으며 react 컴포넌트에서 어떻게 동작하는지 알아보려고 한다 useState() useState는 React 컴포넌트에서 상태 관리를 위해 사용되는 Hook이다 이 hook을 사용하게 되면 함수형 컴포넌트 내에서도 상태를 가질 수 있게 되어 더욱 선언적이고 가독성 있는 코드 작성이.. 더보기 이전 1 2 다음
