sharingStorage

useId 접근성 속성에 전달되는 특별한 ID를 만드는 hooks import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); Usage 접근성 attributes 를 위한 특별한 ID를 만들기 위해 몇개의 관련된 elements 에 대한 ID를 만들기 위해 모든 생성된 ID들에 대한 접두사를 지정하기 위해 클라이언트와 서버가 같은 접두사 ID를 사용하기 위해 Parameters useId는 어떠한 parameter도 존재하지 않습니다. Returns useId는 컴포넌트 내에 useId 호출과 관련된 특별한 ID string을 반환합니다. 주의 사항 useIdHook이므로 컴포넌트의 최상위 수준 이나 자..

들어가기전에.. nextjs는 13버전 이전과 13버전 이후가 완전히 다른 프레임워크라고 해도 무방할 정도로 큰 차이가 있습니다. 일반적으로 나와있는 아티클들은 구버전일 가능성이 높아서 공부하실 때 nextjs 공식문서 - Using App Router부분을 참고해서 크로스체크하시는걸 추천드립니다! 또한 제가 작성한 아티클이 틀린 부분이 없는지, 버전이 맞는지 잘 검수하려고 노력했지만 혹시 구버전에 대한 설명이 있다면 피드백주시면 감사하겠습니다. What? Next.js란 풀 스택 어플리케이션을 개발하기 위한 리액트 프레임워크입니다. Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성하고 이는 곧 개발자에게 애플리케이션 개발에 집중하도록 도와줍니다. How? A..

React 커스텀훅 what ? 컴포넌트간의 hook 로직을 공유하기 위해 사용하는 사용자가 커스텀한 hook입니다. 다음은 공식문서에서 발췌한 예시 코드입니다. import { useState, useEffect } from 'react'; export default function StatusBar() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEve..

들어가며 현재 모던 프론트엔드에서 대부분의 리액트 코드는 서버와의 통신 상태에 따라 View를 나누어 보여주어야하기 때문에 아래와 같이 작성하는 경우가 빈번합니다. /** React */ return ( {isLoading && } {apiError && } {data && } ) 기본적으로 React 17에서의 Suspense는 Data Fetching을 위한 Pending Handler가 아니라, 기존의 워터폴 방식으로 이루어져있는 Render방식을 개선해주는 역할이기때문에, 위의 상황에서 활용하기에는 문제가 있으나, React-Query나 Recoil에서 React 18부터 정식 릴리즈되는 Suspense를 활용해 명령형이 아닌 선언형으로 서버와의 통신 상태에 따라 View를 나누어 보여줄 수 있게..

팀 프로젝트를 진행하는 도중 매일 9시부터 10분씩 데일리 스크럼을 하는데 팀원 한분이 저에게 왜 proccess.env.PUBLIC_URL을 사용하냐고 여쭤보시더군요. 일반 public/asstes/ ,,, 으로 사용해도 되는데 말이죠 분명 저는 전자로 배우고 사용했었는데 막상 질문 받으니 한마디도 할 수 없었어요. 그래서 CRA(create-react-app)의 문서를 뒤져보고, stack overflow와 github의 create-react-app/issue 도 참고하여 이해한 것을 바탕으로 글을 적어봅니다. create-react-app은 CRA로 명칭해서 글을 작성하겠습니다. 1. public폴더와 src폴더 이 문제를 시작하기 앞서 CRA을 통해 만들어진 파일 구조와 쓰임을 확인해보겠습니다...

React API 연동하기 1번 과정에서 상태관리를 위해 사용했던 useState대신에 useReducer를 사용해보겠습니다. useReducer를 사용했을 때의 좋은 점 1. useState의 setState 함수를 여러번 사용하지 않아도 돼서 코드의 길이가 짧아진다. 2. reducer로 로직을 분리하면 재사용이 용이하다. 결과 User.js import React, { useEffect, useReducer } from 'react'; import axios from 'axios'; const reducer = (state, action) => { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: nul..

1.React에서 API를 사용해보기 1.1 API 연동의 기본 API연동을 위해서 우선 새 프로젝트를 만들어야 한다. npx create-react-app react-api-use API를 호출하기 위해서 axios 라는 라이브러리를 설치한다. cd react-api-use npm install yarn // yarn add axios axios를 사용하여 GET, PUT, POST, DELETE 등의 메서드로 API요청을 할 수 있다. API연동 실습에는 JSONPlaceholder 에 있는 연습용 API를 사용해볼 것이며 API는 https://jsonplaceholder.typicode.com/users 주소이다. 결과물 [ { "id": 1, "name": "Leanne Graham", "use..