Web/React

최근 프로젝트에서 모바일에서만 노출되던 화면을 PC 환경에서 그대로 띄워줘야 할 일이 생겼다. 이때 신경써야 할 부분 중 하나가 바로 좌우스크롤이었다. 기존 모바일 브라우저 환경에서는 터치로 스크롤이 가능했지만, 터치가 아닌 마우스를 사용하는 PC 환경에서는 스크롤바로만 스크롤이 가능한 구조였기 때문이다. 즉 유저들은 스크롤바를 직접 움직이거나, 좌우 스크롤이 가능한 마우스, 트랙패드 등의 입력장치를 통해서만 스크롤이 가능하다는 것이었는데, 모바일과 동일한 유저 경험을 줄 수 없다는 문제가 있었다. 따라서 모바일에서 터치로 좌우 스크롤을 조작하는 것처럼, 마우스와 같은 입력장치로도 드래그가 가능하게끔 개선이 필요했다. 다음과 같이 요소들을 수평으로 랜더링해주는 React 컴포넌트가 있다고 해보자. (편의..

리액트에서 form을 다루기 위해 input 태그를 쓸 때, 흔히 볼 수 있는 에러가 있다. 바로 uncontrolled input이 controlled input으로 바뀌었다는 내용의 에러다. 콘솔에서 친절(?)하게 알려주고 있듯이, 초기값이 undefined 였다가 렌더링 후에 값이 들어와 defined value로 바뀌면서 에러가 발생하게 된다. 이 가이드에 따르면, input 태그를 일반적으로 사용하기 위해서는 value에 undefined가 들어가면 안 된다. 따라서 초기값이 존재하지 않을 경우, undefined가 아닌 공백(””)을 줘서 controlled input으로만 사용하도록 바꿔주면 에러를 방지할 수 있다. 그렇다면 여기서 말하는 controlled input이란 무엇일까? Cont..

하나의 컴포넌트를 만든 뒤, 컴포넌트를 여러 번 반복해서 보여주는 목록 화면을 개발한다고 해보자. React에서 권장하는 배열 렌더링 방법은 JavaScript의 map() 함수를 활용하는 것이다. 예를 들면 다음과 같다. function Expenses() { return ( {EXPENSES_MOCK.map((expense) => ( ))} ); } map() 함수를 통해서 엘리먼트의 모음을 만들고, 이걸 JSX에 포함시키기만 하면 된다. 그런데 이 상태로 실제로 서버를 띄워 실행해보면 다음과 같은 경고를 만날 수 있을 것이다. 직역해보면, 리스트에 존재하는 각각의 자식 컴포넌트들은 고유한 “key” 값을 가지고 있어야 한다는 것이다. 실행은 가능하지만, 냅두기에는 빨간 색 경고라 약간 찜찜하다. 대..