코드잇 프론트엔드 부트캠프 23기 파이널 프로젝트를 시작했다. 오늘은 초기 공통컴포넌트 설계 중, Next.js 프로젝트에서 디자인 아이콘(svg)을 깔금하게 관리하기 위해 SVGR을 설정하여 React컴포넌트처럼 임포트해서 사용하고 있었다. import ImgEmpty from '@/assets/icons/img-empty.svg';// JSX에서 일반 컴포넌트처럼 사용 Next.js환경(웹 브라우저)에서는 정상적으로 렌더링되던 컴포넌트였다. 하지만 이번 프로젝트는 cdd개발을 도입하여 storybook으로 모든 컴포넌트를 테스트 하는 방식을 택했기 때문에 stories.tsx파일을 따로 만들어 테스트들 돌리던 와중...!실행하자마자 다음과 같은 런타임 에러를 뱉었다. Error: Element t..

리액트를 사용하다 보면 컴포넌트 구조가 깊어지는 경우가 있다. 나는 예전에 리액트를 처음 공부할 때, atomic단위로 컴포넌트를 잘게잘게 쪼개어 개발한 경험이 있는데, 이때 상위 컴포넌트와 하위의 하위의 하위~ 컴포넌트의 깊이가 너무 깊어졌고, 이때 상위 컴포넌트의 데이터를 맨 밑바닥의 컴포넌트에게 전달해야 할 때, 불필요한 데이터를 중간단계에 위치한 컴포넌트들이 전달하는 불필요한 상황을 경험했다. 공부해보니 이를 'Props Drilling' 현상이라고 한다. 오늘 설명할 Context API는 이런 번거로움 없이 데이터를 신의탑 웹툰의 '신수'마냥 전역적으로 공유할 수 있게 해주는 도구이다.(신수는 공기와 비슷한,,, 애니만화 덕후라 죄송합니다;;)그럼 이것을 어떻게 사용할 수 있을까? Con..

intro 안녕하세요. 오늘은 도대체 왜 리액트에서 불변성을 강조하고,또 불변성을 지키면서 코드를 짜야 하는지 의문이 들어 게시글을 포스팅하게 되었습니다. 그럼 바로 시작해보겠습니다! 불변성이란?리액트를 공부하다 보면 가장 많이 듣는 단어 중 하나가 바로 '불변성'이죠. 의미는 상태를 직접 수정하지 말고 변하지 않게 하라는 말입니다. 하지만 왜 그렇게 번거롭게 그렇게 해야할까요?저는 리액트에서 불변성을 지켜야 하는 이유를 3가지로 정리했습니다. 1. 효율적인 상태 변경 감지 리액트는 상태가 변했는지 확인하기 위해 '얕은 비교'를 수행합니다.리액트에서는 얕은 비교와 깊은 비교가 있는데요, 여기서 얕은 비교는 객체의 깊숙한 곳 까지 일일이 비교하지 않고 성능상 빠르게 비교하는 방식입니다. 상태는 크게 ..

intro 안녕하세요. 오늘은 useRef를 사용하는 중, 왜 useRef는 리렌더링을 피할수 있는지에 대한 의문이 들어 포스팅을 하게 되었습니다. 1. useRef가 리렌더링을 피하는 이유? useRef가 값을 변화시켜도 UI를 변화시키지 않는 이유는 리액트의 렌더링 사이클에 개입하지 않기 때문이라고 합니다.자주쓰이는 useState와 비교를 하자면, - useState: 값이 변하면 리액트에게 "데이터 변했으니까 화면 다시 그려!"라고 트리거(알람)을 보냅니다. - useRef: 값이 변해도 리액트에게 아무런 소식을 전하지 않습니다. 그냥 메모리 어딘가에 저장된 자바스크립트 객체의 속성만 바꿀 뿐입니다. 객체의 속성을 그냥 바꾸기만 한다고? 그게 무슨소리일까요? 코드를 통해 예시를 들어보겠습니다..

intro 오늘은 styled-components 수업을 듣던 중, 왜 tailwind가 아닌 해당 라이브러리를 사용하고 배우며 그것에 관해 고찰한 내용을 글로 써보았다. 하나의 주제를 잡고 파고들어 고찰을 하는 글을 써보는 것은 처음이지만, 구글링과 공부하면서 배운 내용을 정리해보도록 하겠다. 1. Styled-components의 '유지보수 모드' 진입: 왜? 우선 해당 라이브러리는 javascript 안에서 css를 작성할 수 있게 했던 대표적인 Css-In-JS라이브러리였다. 컴포넌트 단위로 스타일을 정의할 수도 있고, props기반으로 동적 스타일링도 가능했기 때문에, React프로젝트에서 많이 사용되었다.React스타일링의 표준이라고 하면 아직 나에게는 Styled-components이다...