본문 바로가기
728x90

React25

[React] Mention 기능 (Tribute.js) Tribute.js는 웹에서 @멘션 기능을 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 사용자가 특정 문자를 입력할 때, 해당 문자에 맞는 추천 목록(예: 사용자 목록)을 표시해주고, 그 중 하나를 선택할 수 있는 기능을 제공합니다. 주로 채팅 또는 댓글 시스템에서 사용자의 이름이나 태그를 입력할 때 편리하게 사용됩니다.기본 동작사용자가 @를 입력하면, 미리 정의된 리스트(예: 사용자 목록)에서 해당하는 항목들이 자동으로 제안됩니다.사용자가 제안된 목록 중 하나를 선택하면, 텍스트에 해당 항목이 삽입됩니다.이 라이브러리는 텍스트 영역, 인풋 필드, 또는 WYSIWYG 편집기와 함께 사용할 수 있습니다.예시간단한 예제를 통해서 사용 방법을 설명하겠습니다. @아이콘 버튼을 누르면 멤버 리스트가.. 2025. 2. 3.
[React] Context useContext는 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할Context 개념context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있음 (React공식문서)⇒ 데이터가 필요할 때마다 props를 통해 전달할 필요 없이 context 로 공유 가능context APIcreateContext : context 객체 생성Provider : 생성한 context를 하위 컴포넌트에게 전달Consumer : context의 변화를 감시하는 컴포넌트 2023. 8. 31.
[React] React에서의 불변성(Immutability) 1. 불변성- 변하지 아니하는 성질.- 공간 좌표의 반전, 시간 반전, 회전, 로런츠 변환 따위의 특정한 변환이나 연산으로도 변화하지 않는다고 하는, 물리량이나 물리 법칙이 갖는 성질2. JavaScript에서원시타입의 값들은 불변성을 가지고 있음string, number, bigint, boolean, undefined, symbol, null모든 원시 값은 불변하여 변형할 수 없음 (https://developer.mozilla.org/ko/docs/Glossary/Primitive)참조형 값들(객체, 배열, 함수 등) 은 다르게 동작number가 참조하고 있는 apple의 주소 값은 변경된다.복사되는 것이 아닌 참조값을 갖게되기 때문에, 사본을 수정하게 되면 원본도 수정됨let string = 'd.. 2023. 8. 30.
[React] setState할 때 […] 하는 이유 (ChatGPT) setState 할때 […] ←— 하는 이유 분석하기언제 써야하고, 안써야 하는지setState 함수는 React 라이브러리에서 상태(state) 관리를 위해 사용되는 함수입니다. 이 함수를 호출하면 React 컴포넌트의 상태를 업데이트하고, 컴포넌트를 다시 렌더링하도록 스케줄링합니다. setState 함수에 전달되는 값은 변경된 상태를 나타내며, 이 값은 새로운 상태로 컴포넌트를 업데이트할 때 사용됩니다.setState 함수를 사용할 때 [...] 형태로 이전 상태를 업데이트하는 이유는, React의 상태 업데이트는 불변성(Immutability)을 유지하면서 이루어져야 하기 때문입니다. 이는 다음과 같은 이유로 중요합니다:성능 최적화: React는 가상 DOM (Virtual DOM)을 사용하여 실제.. 2023. 8. 30.
[React] setState할 때 […] 하는 이유 setState 역할setState()가 쓰일 때, 컴포넌트의 state 객체에 대한 업데이트를 실행state가 변경되면, 컴포넌트는 리 렌더링state와 props의 차이점props와 state는 Javascript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다.props는 컴포넌트에 전달되며, state는 컴포넌트 안에서 관리되는 차이점이 있습니다.언제 setState가 비동기로 작동할까?import React, { useState } from "react";function App() { const [state, setState] = useState(1); const onClick = () => { setState(state + 1); console.log.. 2023. 8. 30.
[React] 리액트 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리선언형React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.컴포넌트 기반스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성됩니다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있습니다.간단한 컴포넌트React 컴포넌트는 render()라는 메서드를 구현하는데.. 2023. 8. 30.
[React] React & JSX (Java Script XML) 메타에서 개발한 오픈 소스 자바스크립트 라이브러리.프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수와 npm 패키지 다운로드 수는 React가 가장 많다.SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다.기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다.거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소.. 2023. 8. 30.
728x90