짧게 알아보는 React 19 버전

React를 주로 사용하는 개발자로서 React 19 버전에서 새로 추가되는 내용과 수정되는 내용은 뭔지 간단히 알아보는 시간을 가지겠습니다. ⭐️ Compiler(컴파일러)첫번째 중요한 사실은 React에 Compiler를 추가한다는 사실입니다. 다른 프레임워크인 Astro나 Svelte는 컴파일 단계가 있어 많은 일들을 개발자 대신 해주지만 React는 컴파일 하는 스텝 없이 오직 브라우저에서 실행되어 추가적인 성능을 위해서 더 많은 코드를 작성해야 했죠.예를 들어서 useMemo, memo, useCallback 같은 hook들 말이죠하지만 React 19 에서는 compiler가 추가되어 자동적으로 memorization을 제공합니다. 따라서 19버전에서는 이러한 성가신 hook들을 더이상 사용하..

→2024.05.10

Frontend

[React hook form] 제어 컴포넌트와 비제어 컴포넌트 동시에 사용하기

출발점 Reack hook form은 form 을 만들때 쓰는 대표적인 라이브러리 입니다. form 구조 떄문에 어쩔 수 없는 많은 state로 부터 우리를 지켜주는 존재입니다. 또한 그에 따른 리렌더링 문제로 부터 자유롭게 해줍니다. Reack hook form는 대표적으로 비제어 컴포넌트를 사용하긴 하지만 제어 컴포넌트로도 form을 만들 수 있게 하는데요 오늘 만들어보는 form은 react hook form을 사용해 사용자가 문자를 입력할때 마다 적합한 input인지 확인하기 위해 제어 컴포넌트로 만들고 굳이 입력할 때마다 유효성 검사가 필요없는 input에 관해서는 비제어 컴포넌트로도 만드려고 합니다. 1. (Controlled Component)제어 컴포넌트란? 제어 컴포넌트는 React st..

→2024.04.03

Frontend

[React] 재조정(Reconciliation)과 key값

프로젝트에서 DatePicker를 직접 구현하게 되었다. 화살표 아이콘을 누르면 한달씩 뒤 또는 앞으로 넘어가는 구조이다. date-fns 라이브러리를 사용해서 날을 생성했고 다음달 이전달로 넘어갈때마다 날짜들을 재조정 시켜주었다. 이때 문제가 발생했다. 달이 바뀔 때 마다 다시 렌더링 될때 정상 값들이 아닌 이상한 값들이 달력에 껴있던 것이였다. 몇번 달을 이동하다 보면 첫째주에서 시작해야할 1일은 다른 주에서 나오기 시작했다. 콘솔에 찍어보니 값은 정확했다. 문제는 key 값이었다. 코드를 보니 key값을 중복값으로 입력하고 있었다. const DatePickerModal = () => { useEffect(() => { editCurrentMonth(selectedDate); }, []); cons..

→2024.03.21

TIL

22/08/20 [모각코] 10일차

네캔만원 일단 배포 완료

→2022.08.21

TIL

22/08/10 [모각코] 7일차

useEffect 와 props 뿌시기 useEffect()에서 console.log()를 믿지말자 데이터는 setBeerData()로 잘 변경되었는대 단지 console.log에만 안보일 뿐 즉, 바로 props로 넘기면 잘 된다. // Search.jsx const Search = (props) => { const [beerData, setBeerData] = useState([]); let navigate = useNavigate(); useEffect (() => { const getBeerList = async () => { console.log('Search.jsx'); let response = await axios.get('/api/search'); console.log('response...

→2022.08.11

TIL

22/08/06 [모각코] 6일차

랜덤추천을 끝으로 페이지 구현작업은 어느정도 마무리 되었습니다. 설명을 하자면 1초간 로딩 시간이 있고 시간이 지나면 백엔드에서 가져온 랜덤한 맥주를 추천해주는 페이지입니다. 이제 남은 기간동안에는 백엔드와 연동해서 api도 사용해서 모든 구현을 마무리할 계획입니다. 이제부터 시작입니다.

→2022.08.08