React (7) 썸네일형 리스트형 React 19 출시 및 내용 React 19 버전이 출시되었다. 변경 점에 대해 알아보자.1. Actions1.1 개념Actions는 React 앱에서 비동기로 데이터를 전송하고, 이에 따른 상태 업데이트를 단순화하기 위한 새 기능이다.요청 대기 상태(loading), 에러 처리, 낙관적 업데이트 등을 자동으로 관리해준다.1.2 예시 코드기존 방식(대기 상태와 에러를 직접 관리)function UpdateName() { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async () => { setI.. Transient Props를 사용해 styled-component 에러 해결하기 styled-components를 사용해 간단한 버튼을 만들었는데 콘솔에 처음 보는 에러가 찍혔다. styled-components를 자주 사용하지 않은 것도 있었겠지만 한 번도 발생해 본 적이 없는 에러였다. 에러의 내용은 다음과 같다. 해석하자면경고: React는 DOM 요소에서 isSelected prop을 인식하지 못합니다. 만약 이것을 의도적으로 사용자 정의 속성으로 DOM에 표시하고 싶다면, 소문자 isselected로 철자를 맞추세요. 만약 부모 컴포넌트에서 실수로 전달한 것이라면, DOM 요소에서 제거하세요. 라는 뜻의 에러였다.에러의 내용을 보고 조금 의아했다. '왜 prop을 인식하지 못하지? 소문자로 철자를 맞추라니 무슨 소리지? 오타는 없는데'라는 생각을 하였다. 원인에 대해 찾아보.. React + MSW(Mock Service Worker)로 백엔드 API 없이 개발하기 서비스 개발 단계에 있어서 보통 프론트엔드 작업은 후순위일 것이다. 기획을 하고 디자인과 백엔드 API가 나오면서 비로소 프론트에서의 본격적인 개발이 시작된다. 하지만 언제까지나 API 개발만을 기다릴 순 없기에 프론트엔드 개발자가 실제 백엔드 API가 아직 준비되지 않은 상황에서도 MSW를 사용하여 목(mock) 데이터를 생성함으로써, 프론트엔드 개발을 선행적으로 시작할 수 있는 방법에 대해 알아볼 것이다. 본 글은 React + TypeScript + MSW 2.0 이후의 버전에 기반하여 작성했습니다.https://mswjs.io/docs/migrations/1.x-to-2.x/1. MSW(Mock Service Worker) 란?Mock Service Worker (MSW)는 웹 애플리케이션 개발 .. react-datepicker로 생년월일 값 받기 폼에서 생년월일에 대한 정보를 받아야 한다. 폼은 react-hook-form을 이용해 구현하였고 폼 중에 생년월일 입력 필드를 클릭하면 달력에서 연월일을 지정할 수 있도록 만들 것이다. 달력을 직접 구현하기에는 시간이 오래 걸릴 것 같아 react-datepicker를 사용하기로 했다. React-datepicker란 ? 커스터마이징이 가능한 달력을 구현할 수 있는 React 라이브러리이다. 자세한 설명은 공식문서에 잘 나와있다.공식문서 : https://reactdatepicker.com/ date-fns 설치하기date-fns는 로케일 설정 및 날짜 포맷팅을 위해 사용되는 라이브러리이다.react-datepicker는 기본적으로 영어로 달력의 내용을 표시해주기 때문에 이를 한글로 설정하기 위해 .. [React] 제어 컴포넌트와 비제어 컴포넌트 react hook form을 사용했을 때의 장단점에 대해 알아보던 중 제어 컴포넌트(Controlled Component와 비제어 컴포넌트(Uncontrolled Component)에 대해 알게 되었다.제어 컴포넌트와 비제어 컴포넌트의 구분점은 폼 요소의 상태관리를 컨트롤 하는 방식에서 나뉜다. 제어 컴포넌트(Controlled Component)제어 컴포넌트는 폼 요소의 상태(값)이 리액트의 상태(state)를 통해 관리되는 컴포넌트이다.사용자의 입력값을 받아서 콘솔에 띄워주는 간단한 제어 컴포넌트의 예시를 작성해보았고 다음과 같다.export default function ControlledForm () { const [name, setName] = useState(''); const .. CRA없이 Webpack(웹팩) + Babel(바벨) 기본 설정하기 이번에 과제를 진행하며 리액트의 초기 개발환경 설정을 하게 되었다. 항상 프로젝트를 시작하며 CRA나 Vite만 사용을 해서 처음부터 구축을 해보는 좋은 경험을 하게 되었다. 다음은 웹팩과 바벨 설정에 대한 단계이다.1. 프로젝트 초기화npm init -y새로운 프로젝트를 초기화하기 위해 터미널에 다음과 같이 npm init -y를 통해 package.json 파일을 생성해주었다. 2. Webpack과 babel 및 필요 패키지 설치npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader각.. recoil을 통한 전역상태관리 웹 SNS가 접목된 음악 플레이어를 만드는 프로젝트 진행 중 팔로우 기능을 구현하는 과정에서 곡이나 플레이리스트를 클릭 시 그 곡이나 플레이리스트의 상세페이지로 이동을 시킨 후 거기에서 곡 업로드한 유저의 이름을 클릭 시 그 유저의 상세페이지로 이동을 시켜서 팔로우를 할 수 있게끔 구현을 해놓았다. 처음 문제는 업로드 된 음악의 데이터를 받아서 그 곳에서 songUpload값을 추출해서 써야하는 과정이었다.우선 음악의 상세페이지의 데이터를 받아서 유저의 상세페이지에서 사용하는데 자꾸 데이터를 받아오지 못하는 현상이 나타났다. 그 후 생각한게 recoil을 사용하여서 음악의 상세페이지에서 song.songUploder부분을 추출해서 전역상태로 관리하는 방법이었다. export const songUpload.. 이전 1 다음
