리액트를 사용하면서 위와 같은 수많은 Props를 하위컴포넌트로 전달해야하는 경우를 경험했을 것입니다. 간단히 만든 제 리따배 프로젝트에도 많이 볼 수 있는 상황인데요. 제가 진행하는 프로젝트에선 컴포넌트 수가 굉장히 적어 Props를 하위컴포넌트의 하위컴포넌트까지 전달해도 크게 힘들진 않지만 하위컴포넌트의 하위컴포넌트의 하위컴포넌트... 으로 Props를 전달해야하는 경우 굉장히 귀찮아집니다. 또 이런 반복되는 코드가 많을 수록 오류확률도 높아지고 코드 가독성도 떨어지죠. * 이 처럼 사용하지도 않는 Props를 받아 바로 하위컴포넌트로 Props를 보내야하는 경우를 Props drilling이라고 부릅니다. 이런 문제를 해결하기 위해 사용하는 라이브러리가 바로 전역상태관리 라이브러리입니다. 라이브러리..
이번 리따배 프로젝트는 달력만들기 입니다. 깃허브 저장소 : https://github.com/jdy0120/frontendproject/tree/master/calender GitHub - jdy0120/frontendproject Contribute to jdy0120/frontendproject development by creating an account on GitHub. github.com 윈도우 시계를 누르면 나오는 달력에 영감을 받아 비슷하게 만들고자했습니다. 11월 1일이 일요일이 아니기 때문에 10월 30,31일 까지 출력된 것을 확인할 수 있습니다. 또 11월 30일이 토요일이 아니기 때문에 12월 1,2,3일까지 출력된 것을 확인할 수 있습니다. 코드 구성은 다음과 같습니다. App..
이전 포스팅에서 리액트는 VirtualDom이라는 방식을 사용해 리렌더링한다는 것을 확인했습니다. 리액트에서 사용하는 VirtualDOM에 대해 알아보자 리액트는 직접 DOM에 접근하지 않고 값을 변경해야하는 규칙을 가지고 있습니다. 그렇기 때문에 이런 규칙을 이해해야 올바른 개발을 할 수 있습니다. 이런 코드를 본 적 있을 것입니다. document.ge blog.doyeonism.com 1. VirtualDOM에서 useState로 인해 변경된 값이 있다는 것을 확인합니다. 2. 변경된 값이 있는 컴포넌트와 그 하위컴포넌트 모두 파악합니다. 3. 그렇게 파악한 컴포넌트들을 모두 VirtualDOM에서 수정한다. 4. VirtualDOM의 계산이 끝나면 DOM에 적용한다. 그리고 VirtualDom으로..
이번 프로젝트는 아이폰계산기를 디자인한 피그마파일을 보며 리액트로 개발을 진행했습니다. 컴포넌트는 버튼을 클릭하면 출력하는 Screen부분과 모든 버튼들이 모여있는 ButtonBox로 나누어 개발을 진행했습니다. Screen.tsx 컴포넌트 아이폰 계산기에서와 같이 숫자가 길어지면(예를들어 1억단위의 숫자보다 커지면) font-size를 줄여주는 식으로 아이폰 계산기를 따라했습니다. 위 코드를 보듯이 numberLen이 길어지면 그 길이에 따라 font-size가 수정되는 것을 확인할 수 있습니다. 또한 1000단위마다 쉼표를 찍어주는 기능 또한 구현했는데요. 이는 정규식을 이용해 간단히 구현했습니다. ButtonBox.tsx 컴포넌트 버튼들의 나열을 css로 구현할때 grid를 사용했습니다. gird를..
