밴쿠버에서 테니스치는 한량나부랭이

안녕하세요. 저는 2년차 리액트 웹 개발자입니다.이번에 React Native 강의를 듣게 되었습니다. 이미 리액트를 다루고 있던 상태에서 모바일 개발이 처음이라 많은 기대와 함께 강의를 수강하게 되었는데요. 강의가 끝나지 않았지만, 현재까지의 학습 경험을 바탕으로 느낀 점과 앞으로의 목표를 정리해 보았습니다. React와 React Native의 차이점 리액트를 이용한 웹 개발에선 주로 HTML, CSS, JavaScript를 사용하며 DOM을 직접 조작하는 방식으로 UI를 다룹니다. 그러나 React Native는 웹 브라우저 대신 모바일 장치에서 동작하는 앱을 만들기 때문에, 플랫폼별 네이티브 컴포넌트를 사용해야 합니다. 처음에는 React에서 사용하던 DOM 요소들이 React Native에서 어..

프론트엔드 개발자로서 '자바스크립트 + 리액트 디자인 패턴'이라는 책을 읽으면서,  처음에는 디자인 패턴이라는 주제가 워낙 흔하게 다뤄져 왔기 때문에 크게 기대하지 않았습니다. '디자인 패턴'이라는 용어만 들어도 어느 정도 예상 가능한 내용일 것이라고 생각했기 때문입니다.  그러나 책을 읽어나가면서 제 예상은 완전히 뒤집혔습니다. 이 책은 기존의 패턴 관련 서적과는 다르게, 자바스크립트와 리액트라는 현대적인 개발 환경에 맞춰 디자인 패턴을 새롭게 해석하고 적용하는 방법을 제시하고 있었기 때문입니다.    책의 초반부는 예상대로 GoF의 디자인 패턴을 소개하며 시작되었지만, 저자가 자바스크립트의 비동기 처리와 리액트의 컴포넌트 기반 아키텍처에서 이러한 패턴들을 어떻게 효과적으로 활용할 수 있는지 구체적인 ..

리액트에서 Key값이 필요한 이유 배열 map함수 사용시, key값을 넣지 않으면 콘솔에서 아래와 같은 문구를 발견할 수 있다. 렌더링엔 전혀 문제가 없지만, 비효율적이라고 말한다. 그런데 내가 듣는 인강에선 아무도 왜 비효율적인지 자세히 설명해주지 않았다. React 공식문서상, Key는 어떤항목이 변경, 추가 그리고 삭제 될 경우 리액트가 식별하는 것을 돕고, 배열 내 element에 안정적인 고유성을 주기위해 지정되야 한다. 고유성 부여를 위해 key값은, 배열의 각 항목 간 서로를 식별 할 수 있는 문자열을 사용하는 것이 좋으며, 불가능할 경우 index를 사용한다. 하지만 index는 좋은 방법은 아니라고 한다.(배열의 처음이나 중간에 새로 데이터가 삽입, 수정, 삭제될 경우 그 부분만을 캐치할..