React.js 3

[React.js] Re-rendering Issue & Objects are not valid as a React child

시작하며 Nomad Coder 강의 중 useTab 커스텀 훅 만드는 과정에서 제목에 써둔 것처럼 Re-rendering Issue와 Objects are not valid as a React 이슈를 만났다. 흔한 이슈이므로 작성하면서 이런 에러가 왜 발생했는지 써두고자 한다. 코드 Re-rendering Issue 정상적으로 작동할 때의 코드는 위 모습과 같다. 여기서 2번 주석 표시에서 실수를 하거나 아래 return 되는 리액트 컴포넌트의 onClick 부분을 잘못 적을 경우 Re-Rendering이 계속 발생할 수 있다. useTabs 훅은 객체 하나를 return 해주고, App() 함수형 컴포넌트에서는 이를 사용할 수 있게 한다. 맨 처음 UseTabs는 useState를 통해 currentI..

👩‍💻/React 2021.03.17

[React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 테크 블로그 기획 기존에 GIthub Pages로 배포한 github.io 블로그를 가지고 있긴 했지만, 급할 때 템플릿 가지고 와서 고쳐 쓴 게 다라 레이아웃에 제약이 커 아예 새로 제작하기로 했다. 제작하며 여 uiyoji-journal.tistory.com 랜딩 페이지로만 꾸몄다면 네비게이션은 더 손 ..

👩‍💻/React 2021.02.13

[React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기

테크 블로그 기획 기존에 GIthub Pages로 배포한 github.io 블로그를 가지고 있긴 했지만, 급할 때 템플릿 가지고 와서 고쳐 쓴 게 다라 레이아웃에 제약이 커 아예 새로 제작하기로 했다. 제작하며 여태 안 써봤지만, 써봐야 할 것 같은 기술들을 몽땅 체험해보는 것이 목표. 새로운 테크 블로그에는 포트폴리오와 Reusme 그리고 Blog 기능까지 넣을 거라 디자인은 최대한 심플하게 하기로 했다. 계속 두고 두고 쓰게 될 웹 사이트이니 계획과 프로토타이핑에도 신경을 썼고, 어떤 기능을 최소한으로 갖출지, 어떤 부분은 앞으로 추가해서 써도 괜찮을지 등을 꼼꼼히 생각하며 디자인했다. Figma Prototyping 어쨌거나 Resume 역할을 하게 될 블로그이니 모바일로 볼 일이 더 많겠다 싶어 ..

👩‍💻/React 2021.02.09