소소한 코딩일지

Atomic Design 관련해서 기술 블로그를 보다가 원자 단위의 컴포넌트를 합치는 과정에서 태그로 감싸는 것을 보았다. 그 코드를 보고, `음, 빈 태그()로 감싸면 안 되나? 의미상 차이가 큰가?`라는 생각을 하게 되었다. 그리고 '빈 태그가 React.Fragment와 같다고 했던 거 같은데' 하는 생각이 연달아 들었기에 호다닥 , , React.Fragment를 살짝 정리해보고 왜 로 감싸게 되었는지 알아보려고 한다. div 태그는 컨텐츠를 담는 컨테이너로서 쓰인다. 콘텐츠가 보일 영역을 구분하는 태그이다. React.Fragment React.Fragment는 컴포넌트가 새로운 노드를 추가하지 않고 여러 자식을 그룹화할 수 있게 해 준다. 공식 문서의 설명을 참고하면, class Table e..

나는 function Modal() {} 로서 컴포넌트를 선언하는 함수형 컴포넌트를 주로 사용해 왔다. 이번에 타입 스크립트를 사용을 연습하면서 React.FC라는 것을 처음 보게 되었다. 컴포넌트를 선언하면서 사용하게 되었는데 정확한 사용법을 알고 싶어서 이번 블로그 글을 작성하게 되었다. FC 타입 React.FC는 함수형 컴포넌트의 타입을 선언할 때 사용한다. React.FC 와 같은 식으로 안에 props에 대한 타입을 선언해줌으로써 사용할 수 있다. interface Props { content: string } const Modal: React.FC = ({ content }) => ( { content } ) FC 타입이 정의되어있는 코드를 보면 type FC = FunctionCompone..

Redux toolkit과 Redux Thunk를 공부하면서 작은 프로젝트를 만들어보고 있었는데, Redux Thunk를 통해 api통신을 하는 과정에서 다음과 같은 에러 메시지를 만났다. 생소한 에러 로그이기도 하고, 현재 Redux Thunk를 공부하는 데 많이 애먹고 있어서 이번 에러 로그에 관한 정보와 해결 방안을 기록해두려고 한다. ## 상황 Redux Thunk를 통해 날씨 API와 GET 통신을 하기 위해서 코드라인을 작성했다. 데이터를 사용하는 쪽에서 console.log를 찍어보니 다음과 같은 에러로그가 나타났다. 에러 로그를 구글링해보니 공식문서의 리덕스 설계 규칙에서 관련 정보를 찾아볼 수 있었다. Non-Serializable 한 State나 Action을 사용하지 말 것. Prom..

프런트엔드 프로젝트를 진행하면서 모달을 사용할 때가 너무나도 많다. Modal의 사용성에 대해서 알아보던 중, Portal이라는 개념을 사용해서 모달을 사용하는 경우를 알게 되었다. 그래서 Portal이 어떤 것이고, 실제로 Portal을 활용해서 Modal까지 만들어 보았다. Portal Portal을 들었을 때, 처음 드는 생각은 약간 순간이동 이런 건가? 하는 생각이 들었다. React 공식 문서에 따르면 Portal이란 상위 DOM 계층 외부에 존재하는 DOM 노드로 자식 컴포넌트를 랜더링 시키는 방법이라고 정의되어있다. ReactDOM.createPortal(child, container) 첫 번째 인자로는 Child (자식 컴포넌트) 요소가 들어가고, 두 번째 인자로는 자식 컴포넌트가 담길 상..

DOM을 수정하는 것은 리소스가 많이 필요하다. DOM 수정에 따른 성능 저하를 방지하기 위해 DOM을 최소한으로 수정해했고, 그래서 나온 개념이 VIrtual DOM이다. Virtual DOM은 React에서 나온 실제 DOM과 구조가 비슷한 React의 객체 트리이다. DOM을 직접 수정하지 않고 Virtual DOM을 조작하면 React가 변화된 부분을 적절하게 DOM에 적용시킨다. Virtual DOM을 사용함으로써 실제 DOM을 조작할 필요가 없어졌다. 웹의 복잡성이 더욱 높아지면서, DOM을 직접 관리하는 것이 복잡하고, 실수의 가능성이 존재했는데, 이러한 부분을 virtual DOM을 통해 자동화하고, 추상화해줌으로써 해소할 수 있다. Virtual DOM은 실제 DOM 변화를 최소화시켜주는..

영화 사전 웹을 만들면서 메인 페이지의 검색 바에서 검색어를 Submit 했을 때, Search 페이지에서 값을 받아 결과를 반영해주고자 했다. 값은 잘 넘어오지만 Reload 되지 않은 화면만 나왔다. 위 코드로 메인 페이지에서 값은 잘 받아지지만 reload 되지 않는 이슈가 있다. 해결 방식을 구글링해보니 다음과 같다. 1. react-router-dom 과 history라이브러리의 버전을 맞추어주는 것 2. 내가 해결한 방법 1번 방식을 시도했지만 프로젝트를 시작하면서 history를 따로 설치해주었던 기억이 없었고, 좀 더 간단한 방법이 있을 것 같아 다른 방법을 찾아보았다. 내가 해결한 방법은 다음과 같다. 시행착오 끝에 생각보다 단순하게 이슈가 해결되었다. 메인 화면에서 값을 받아 searc..