꿈꾸는 개발자

도입 원티드 6월 강의를 수강하면서 useRef로 값을 참조하고 관리하는 코드를 접했다. 강사님에 따르면 제어/비제어 컴포넌트의 사용을 고려할 때 useState를 사용할 것인지 아니면 useRef로 값을 관리할건지 상황에 따라서 나뉠 수 있다고 했다. 물론 둘의 차이점은 이해가 됐다. 하지만, 비제어 방식의 경우 단순히 렌더링 횟수를 줄이고, 개발자가 trigger할 수 있다는 이유만으로 사용하는지 궁금하기도 하고 개념이 조금 모호한 것 같아서...이전에 작성했던 글과 강의에서 학습한 자료, 그리고 최신에 업데이트 된 react 공식문서와 함께 정리하고자 한다. useRef에 대한 이해가 부족하시면 여기에 들어가서 추가적으로 학습하는 것을 권장한다. React 공식문서가 리뉴얼 되기 이전에는 "신뢰 가..

CSR (Client Side Rendering) CSR은 말 그대로 클라이언트에서 페이지를 렌더링함을 의미한다. 브라우저에서 서버에 요청을 보내면, 서버에서 웹 페이지를 렌더링하지 않고 Single Page+ JS 파일를 클라이언트로 보낸다. 클라이언트에서는 전달 받은 웹 페이지+JS 파일을 완전히 렌더링 된 페이지로 바꾼다. 브라우저의 요청 경로가 다를 경우 새롭게 서버에 요청하는 것이 아닌, 기존에 받은 파일을 기반으로 페이지를 다시 렌더링하게 된다. 장점 후속 페이지 로딩이 더 빠르다. 모든 파일이 사전에 로드되기 떄문 새로고침이 발생하지 않아 네이티브 앱과 비슷한 사용자 경험 제공 가능 별도의 API 호출이 필요가 없는 페이지의 경우 로딩 모듈 필요X 서버 호출 때마다 전체 UI를 리 로딩할 필..

주제:스토리북과 함께하는 컴포넌트 주도 개발 컴포넌트에 대한 설명: 재사용할 수 있는 코드 블록 우리가 생각하는 컴포넌트의 종류: (3가지를 구별해서 생각하는 것이 중요하다) Component Web Component 빌드 필요X 표준화됨 바로 사용할 수 있다 (커스텀도 가능하다) React Component Web Component: 정의: 웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다. 웹 컴포넌트 VS React react가 표준이 아니고 웹 컴포넌트가 표준인 이유?: 웹 컴포넌트는 별도의 설치 없이 사용할 수 있다. (근본적인 차이점) 웹 컴포넌트도 다른 사람이 만들 것을 사용할 수 있다..

리액트에서 글이 많은 컴포넌트를 작성할 때 때로는 bold 형식의 글이 필요할 때가 있다. 하지만 매번 그럴 때 마다 태그를 쓰기 귀찮아서, 뭔가 새로운 방법이 없을까 여러 코드를 탐험하던 중 흥미로운 코드를 찾았다. import React from "react"; export function TranslateBold({ children, className, as = "p" }) { const pattern = /(\*\*.*?\*\*)/; const text = children; const parts = text.split(pattern).filter((x) => x.length > 0); const elements = parts.map((part, index) => { if (part.match(pa..