'프레임워크/React' 카테고리의 글 목록

React의 state와 props

2023.10.08

State란? React 컴포넌트 내에서 관리되는 데이터의 현재 상태를 나타낸다. 각 컴포넌트는 자체적인 state를 가질 수 있으며, 이 데이터는 해당 컴포넌트 내에서 변경될 수 있다. 왜 사용할까? 동적인 데이터 관리 state를 사용하여 애플리케이션의 상태를 저장하고 관리할 수 있다. 이는 사용자와의 상호작용, 서버에서 받은 데이터, 현재 애플리케이션 상태 등과 같이 변할 수 있는 데이터를 처리하는 데 유용 UI 업데이트 state의 값이 변경되면 React는 해당 컴포넌트와 그 자식 컴포넌트의 렌더링을 다시 실행 이를 통해 UI가 업데이트되어 사용자에게 실시간으로 변경된 정보를 보여줄 수 있다. 조건부 렌더링 state의 값에 따라 다른 UI나 동작을 구현할 수 있다. 예를 들어, 사용자의 인증 ..

프레임워크/React

react-router-dom v6 사용법

2023.10.03

라우팅이란? 사용자가 요청한 URL 에 따라 해당 URL 에 맞는 페이지를 보여주는 것 가장 많이 쓰이는 라이브러리? React Router 리액트 라우터(React Router) 개발자가 주소별로 다른컴포넌트를 보여주기 위해 사용하는 라이브러리 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공 주요 컴포넌트 BrowserRouter 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 해주는 기능 담당 URL마다 컴포넌트가 바뀔 때 이때 바뀌는 부분의 최상단에 위치 해야 함 src/index.jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { Browser..

프레임워크/React

Tiptab font-size 기능 구현

2023.04.19

1. 라이브러리 설치 npm install @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-text-style 2. 폰트 사이즈 수정 라이브러리 만들기 위 라이브러리에는 font-size 수정하는 내장함수가 포함이 안 되어 있다. ♧ Tiptab 라이브러리 자체가 필요한 것들을 따로 설치해서 사용해야 되는 거 같다.(리액트 같은 느낌) 직접 커스텀 해서 만들거나 npm install tiptap-extension-font-size 라이브러리를 설치해서 사용하여야 한다. 나는 필요시 수정도 할 수 있을 거 같아 스택오버플로우를 참고해 라이브러리를 따로 만들었다. src/editor/lib/font-size.js import { Extensio..

프레임워크/React

react-quill Custom

2023.04.17

toolbar 기존 아이콘 변경 import ReactQuill, { Quill } from "react-quill"; import "react-quill/dist/quill.snow.css"; const icons = Quill.import("ui/icons"); icons["bold"] = "B"; export default function Editor() { return ( ); } ▼ 종류 더보기 종류 설명 (아이콘) icons["bold"] 굵기 icons["italic"] 기울임 icons["underline"] 밑줄 icons["strike"] 취소선 icons["blockquote"] 인용 icons["color"] 글자색 icons["background"] 배경색 icons["image"..

프레임워크/React

커스텀 훅(Custom Hook)

2023.04.08

React Hooks의 개념을 확장하여 재사용 가능한 로직을 만들 수 있는 기능입니다. 커스텀 훅을 사용하면 여러 컴포넌트에서 공통으로 사용되는 로직을 쉽게 추출하고 관리할 수 있습니다. 기본적으로 커스텀 훅은 일반 JavaScript 함수이며, 내부에서 기존의 React Hooks를 사용할 수 있습니다. 커스텀 훅의 이름은 보통 use로 시작합니다. 이렇게 작명하는 이유는 훅 사용 규칙을 준수하고, 커스텀 훅이 일반 함수와 혼동되지 않게 하기 위함입니다. 커스텀 훅 사용 전 로직 import React, { useState } from 'react'; const App = () => { const [id, setId] = useState(''); const [nick, setNick] = useStat..

프레임워크/React

useImperativeHandle

2023.04.07

React의 커스텀 훅(hook) 중 하나로, 부모 컴포넌트에서 자식 컴포넌트의 함수 또는 값을 직접 호출하거나 사용할 수 있도록 해줍니다. 일반적으로 컴포넌트 간의 상호작용을 위해 props를 사용하지만, 때때로 부모 컴포넌트가 자식 컴포넌트의 인스턴스를 직접 참조해야 하는 경우가 있습니다. 이때 useImperativeHandle을 사용할 수 있습니다. import React, { useRef, useImperativeHandle, forwardRef } from 'react'; const CustomInput = (props, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.cu..

React의 state와 props

react-router-dom v6 사용법

Tiptab font-size 기능 구현

react-quill Custom

커스텀 훅(Custom Hook)

useImperativeHandle

티스토리툴바