본문 바로가기

React21

[react] useCallback 리액트에서 리렌더링이 빈번한 것은 좋지 않다. 리렌더링을 줄이는 것이 중요한데 이 작업을 최적화한다고 할 수 있다. 불필요한 리렌더링이 발생하지 않도록 하는 최적화 방법에 자주 사용되는 것 중 하나는 바로 useCallback을 사용하는 것이다.이 외에도 컴포넌트를 캐싱하는 memo(React.memo)와 값을 캐싱하는 useMemo가 있다.  useCallback오늘 알아볼 훅은 useCallback이다.useCallback은 함수를 캐싱한다고 할 수 있다. 함수를 메모리에 저장하여 매번 새로 생성되지 않도록 할 수 있고, 의존성 배열을 추가하여 원하는 때에 다시 메모리에 저장하도록 지정할 수 있다.  아래의 코드는 App 컴포넌트 하위에 Test 컴포넌트와 FileDrop 컴포넌트가 있는 구조이다. .. 2024. 7. 17.
[react] PropsWithChildren 요즘 리액트 기초를 다시 공부 중인데, PropsWithChildren 타입을 알게 됐다. 이 타입은 상위 컴포넌트에서 하위 컴포넌트로 children을 내려줄 때 타입을 지정하는 children : ReactNode를 대체할 수 있다. 마우스 오른쪽 버튼을 눌러서 index.d.ts에 이동하여 type PropsWithChildren 타입을 보면 children을 반드시 설정하지 않아도 되는 선택적인 속성임을 알 수 있다. 만약 꼭! children이 들어가야 한다면 이 속성을 사용하는 것은 바람직하지 않을 것 같다. 꼭 필요한 곳에 children이 들어가지 않았는데도 에러가 나지 않을 것 이기 때문이다.그래서 선택적으로 children이 필요한 곳에는 PropsWithChildren 타입을 사용하고.. 2024. 7. 11.
[react] 클래스형 컴포넌트 함수형 컴포넌트는 많이 사용해 봤는데 클래스형 컴포넌트는 사용해 본 적이 없어서 기록하게 되었다. 먼저, 클래스형 컴포넌트는 react의 Component 클래스를 상속받아야 하기 때문에 import 해준다.또한, render 메서드를 포함해야 한다.  아래의 코드는 color와 text 속성을 props로 내려준다.App.tsximport {Component} from 'react'import ClassComponent from './ClassComponent'export default class App extends Component { render() { return ( ) }} color 속성은 style에 적용하여 글.. 2024. 7. 11.
[react] 탭 메뉴 만들기 완성된 탭 메뉴 이번에 담당한 화면에 탭 메뉴가 필요한 부분이 2곳 정도 있어서, 컴포넌트로 만들어보기로 했다. 탭 메뉴 코드TabProps에서 id는 탭 메뉴를 식별하고자 추가했고,title은 탭 메뉴의 이름, content는 탭 메뉴를 눌렀을 때 나와야 하는 컴포넌트를 전달하고자 추가하였다. 탭 메뉴를 아래와 같이 배열로 전달하면 TabMenu.tsx 탭메뉴 컴포넌트에서 map으로 돌려서 렌더링 하게 된다.const tabArr = [ { id: 0, title: '내 프로필', content: }, { id: 1, title: '내가 쓴 글', content: }, { id: 3, title: '좋아요 한 글', content: }, ]   이렇게 위 탭 메뉴 정보 배열을 아.. 2024. 4. 16.
리액트로 슬라이드 만들기 2 + typescript 슬라이드의 늪에 빠진 나... 하하 즐겁다. 더 제대로 만들었다면 더 즐거웠을 텐데...? 어쨌든 리액트로 슬라이드 만들기 시작~ 생각한 로직 슬라이더 안의 요소의 사이즈에 기반하여 이동한다. 다음/이전 버튼을 누르면 슬라이드 요소를 감싸는 박스를 이동시킨다. 위치가 0이면 이전 버튼 미노출 슬라이드 요소를 감싸는 박스의 사이즈가 위치 값이랑 같으면 미노출(하지만 이 부분은 개선이 필요..) 작업 설명 현재 슬라이드의 위치를 담을 state를 만든다. const [position, setPosition] = useState(0); 슬라이드로 이동할 값을 정한다. 354 부분은 슬라이드 요소 1개의 가로 사이즈이고, 16은 오른쪽 마진의 값이다. 값을 합해서 370이라고 해도 되지만 각 값의 구분을 위해 .. 2024. 4. 4.
리액트로 슬라이드 만들기 + typescript 이번 팀플에서 맡은 페이지에 슬라이드 파티가 시작됐다. 전부 라이브러리 없이 구현하려니 신나네?(정말... 신나..)어쨌든.. 그렇게 시작된 리액트로 슬라이드 만들기시작합니도~ 슬라이드 만들기지만 정말 별 기능이 없는 간단한 슬라이드이다. 근데 이건 뭔가 슬라이드 느낌이 나지 않아서 곧 옆으로 넘어가는 슬라이드로 다시 작업할 예정이지만, 첫 슬라이드 작업이라서 기록에 남겨본다. fade 되는 슬라이드를 구현하려 했지만, 지금은 display block/none으로 동작하는 슬라이드이다.곧.. fade도 도전! 생각한 로직useState를 만들어서 현재 슬라이드의 index 관리다음 버튼을 누르면 state + 1, 이전 버튼을 누르면 state - 1을 해서 배너의 index와 state 값이 같으면 배.. 2024. 4. 3.
react/typescript input checkbox 전체 선택 구현 그동안 프로젝트 진행하면서 구현한 적이 없어서 이번에 연습 삼아 구현하게 되었다. 기능 1. 전체 선택 클릭 시 다른 체크박스 전체 선택/해제 2. 전체 선택 상태에서 다른 체크박스 해제 시 전체 선택 부분도 선택 해제 3. 체크박스 재사용 가능하도록 컴포넌트로 분리 Checkbox 컴포넌트 / Checkbox.tsx 재사용 가능하도록 props를 내려줬다. import React from "react"; const Checkbox = ({ title, name, checked, onChange }: { title: string; name: string; checked: boolean; onChange: React.ChangeEventHandler }) => { return ( {title} ); }; .. 2024. 3. 29.
로그인 기능 작업을 하면서 UI 작업 로그인과 회원가입은 login.jsx 에 구현되어 있으며, isJoin state로 회원가입 상태인지 관리하여, true 일 경우 회원 가입 상태로 보고 회원가입 폼이 나오도록 만들었다. [login.jsx] import React, { useRef, useState } from "react"; import { InputName, InputStyle, LoginWrap, PageTitle, BtnBlackBg, BtnBlackText, ColorError, BtnArea } from "./LoginStyles"; import api from "../../axios/api"; import { useDispatch } from "react-redux"; import { setIsLogin, set.. 2024. 2. 21.

티스토리툴바