react
-
[React] useState : console.log에 이전 state가 출력되는 이유?Front-End/React 2024. 9. 14. 07:09
🍀목차글의 목적useState 문서 읽어보기state 업데이트 큐flushSyncuseEffect 글의 목적 React로 함수 컴포넌트를 만들다 보면 자연스럽게 React Hooks들을 사용하게 된다. 그중에서도 useState는 컴포넌트에 state 변수를 추가해서 상태 관리와 업데이트를 하게 해 주는 Hook이다. 그런데 state 업데이트 후 바로 console.log를 사용해 출력해 보면 이전 상태값이 출력된다.이유가 무엇일까? useState 작업이 비동기이기 때문에? 더 자세히 설명할 수는 없을까?많이 사용함에도 이처럼 설명을 못하는 부분이 있어 글을 작성하게 되었다. 이번 글은 useState를 사용하며 헷갈렸던 state 업데이트에 관해 알아보았다. useState 문서 읽어보기문서 c..
-
[shadcn/ui] Select Component -> Multiple Select Component 커스텀Front-End/React 2024. 6. 4. 00:17
🍀 목차새로운 prop 만들기Select Component의 메서드 활용하기작성한 스토리회고 개요 단일 선택만 가능한 shadcn/ui의 Select를 다중 선택이 가능하도록 Multiple Select로 커스텀해보자.새로운 prop 만들기 Anatomyimport * as Select from '@radix-ui/react-select';export default () => ( ..
-
[shadcn/ui] Dialog, Alert Dialog Component 구현기Front-End/React 2024. 5. 14. 14:07
🍀 목차Shadcn/ui Dialog(+Alert Dialog) 뜯어보기 & 속성 설명UI 커스텀과 작성한 스토리회고 개요 Modal Component는 현재 제품에서 가장 많이 쓰이는 컴포넌트 중 하나다. Avatar Component처럼 처음부터 인터페이스 제작 -> UI 구현까지 하기에는 시간이 부족하여 shadcn/ui의 Dialog, Alert Dialog를 제품에 맞게 커스텀하기로 결정하였다.시작하기에 앞서 Modal, Confirm, Alert의 차이를 알아봤다.Modal : 주의가 필요하거나 추가 정보를 제공하는 팝업 콘텐츠. 텍스트, 양식 입력 같은 다른 대화형 요소를 포함할 수 있고 사용자가 Modal 외부를 클릭하거나 특정 버튼(닫기, 취소, 저장)을 클릭할 때까지 다른 인터페이..
-
[React] Avatar Component 구현기Front-End/React 2024. 5. 9. 19:52
🍀 목차 Avatar Component에는 어떤 속성이 필요할까? Interface 구현기 UI 구현기 회고 Avatar Component에는 어떤 속성이 필요할까? Avatar Component는 사용자 또는 개체를 대표하는 이미지를 표시하는 데 사용된다. 예를 들어 프로필 이미지, 쇼핑 사이트의 상점 프로필 등이 포함된다. 다른 디자인 라이브러리를 보며 컴포넌트에 어떤 속성들이 필요할지 참고해 보자. (필수) radius, size, imageUrl, altText 가장 익숙한 형태의 기본 Avatar를 구현하려면 Border Radius와 size, 그리고 img 태그의 src 속성에 전달할 image의 url과 alt 속성에 전달할 대체 텍스트인 altText가 필요할 것으로 예상할 수..
-
[React] 번들러(Bundler)Front-End/React 2023. 12. 7. 23:34
🍀 목차글의 목적CRA(Creat-React-App)번들러WebpackVite 글의 목적 처음 React 프로젝트를 시작하게 되었을 때, 공식 문서에서는 Create React App을 추천해 줬었다. React에 아직 익숙지 않은 개발자에게 Create-React-App은 처음부터 React로 만들어진 새로운 애플리케이션을 만드는 가장 편한 방법이었다. 모든 React App을 CRA(Create-React-APP)로 만들어야 하는 줄 알았던 때도 있었다. 시간이 지나며 Webpack, Bundler, Vite 등의 키워드를 마주치는 비율이 높아졌고, 왜 현재는 CRA를 추천하지 않는 사람들이 많은 지 알고 싶어 글을 작성하게 되었다. 글을 통해 번들러(Bundler)에 대한 개념을 대략적으로..
-
[React] 상태 관리 (+라이브러리)Front-End/React 2023. 12. 1. 18:54
🍀 목차 전역 상태 상태 관리의 필요성 대표적 라이브러리와 콘셉트 계속되는 연구들 전역 상태 상태는 변화하는 동적인 데이터이다. 웹 페이지에서 데이터는 사용자와 상호작용을 통해 변경되기도 하고, 그렇게 변한 데이터가 UI에 나타나기도 한다. React에서는 Component(컴포넌트)들이 State(상태)라는 객체를 가지며, 변경되면 컴포넌트는 리렌더링되어 반영하게 된다. 이러한 상태들은 보통 컴포넌트 안에서 관리되나, 단일 컴포넌트를 넘어 전역적으로 프로젝트에서 사용되는 상태가 될 수도 있다. 보통 전역이란 단어가 붙으면 프로그램 어디서나 접근할 수 있다를 의미하는데, 전역 상태도 같다. 또한, 상태기에 컴포넌트가 변경을 감지해 리렌더링 해야 한다. 전역 상태의 예시에는 무엇이 있을까? 다크모드나 로그..
-
[Next.js] React와의 Routing 차이점Front-End/React 2022. 7. 15. 02:39
🍀 목차 React.js의 Routing Next.js의 Routing 어떤 것을 사용해야 할까? 들어가며... 이 글의 Routing은 현재 네트워크에서 다른 네트워크로의 최적 경로를 설정해주는 과정이 아니다. 어떠한 URL이 들어오면 그에 맞는 화면을 전송해주는 것을 뜻한다. React.js의 Routing React 공식문서의 Next.js 소개를 보면 기본적으로 스타일링과 "라우팅 해결책"을 가지고 있다고 설명되어 있다. React에는 어떤 라우팅 문제점이 존재하는 것일까? 우선 React는 SPA(Single Page Application)이란 것을 알아야 한다. 라우팅은 본래 서버에서 담당했지만, SPA가 등장하며 라우팅을 클라이언트가 담당하게 되었다. 서버에서 담당했던 라우팅은 애플리케이션의..