개인과제 13

Context API로 Props Drilling 해결하기

오늘은 내가 최근에 과제를 하면서 겪었던 props drilling 문제와 이를 리액트 Context API로 해결한 경험을 공유하려고 한다.  포켓몬들의 데이터를 컴포넌트 간에 주고 받을 때 'props'를 이용해서 과제를 만들고 있었다. props는 데이터를 컴포넌트간 쉽게 전달할 수 있지만 'props-drilling'이라고 불리는 문제가 발생한다. 'props-drilling'이란 데이터를 전달하기 위해 여러 중간 컴포넌트를 거치는 경우를 말한다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트까지 데이터를 전달할 때, 그 사이에 있는 모든 컴퓨터가 'props'로 데이터를 받아야 할 때가 있다. 이건 코드가 길어지고 복잡해지는 원인이 될 수 있다.  그래서 오늘은 'props-drilling'으로 ..

개인과제 2024.08.21

올림픽 메달 트레커 만들기!

오늘은 하루만에 Olympic-Medal-Traker를 만들어보았다.    시연 영상이다.     이 작업물은 처음부터 끝까지 내가 스스로 만들어보았다. 중간에 막히는 부분이나 오류부분만 검색해서 해결하였다.과제를 하면서 알게된 부분을 이 블로그에 담아보겠다!      이것은 내 코드의 일부분이다. 여기서는 논리 or 연산자(||)를 사용해보았다.  if (existingCountry) { existingCountry.gold = gold || existingCountry.gold; existingCountry.silver = silver || existingCountry.silver; existingCountry.bronze = bronze || existingCountry..

개인과제 2024.08.14

나만의 TodoList 만들어보기

오늘은 나만의 TodoList를 만들어 볼 것이다. 간단한듯 보이지만 초보인 나에게는 조금 어려웠다!    일단 나만의 투두리스트 완성본이다. 기능구현에 집중하느라 디자인은 간단하게 만들어 주었다. 시연 영상이다.     이제 만드는 과정을 이야기 해보겠다! 복습하는 마인드로 쭉 이야기해보겠다!      먼저, 크게 구조를 잡아주었다. 크게 구조를 잡은 다음 중복되는 부분은 나중에 컴포넌트로 분리해줘도 되니깐 크게 세개의 컴포넌트 구조를 생각했다.  1. App.jsx : 부모 컴포넌트로, input창과 '추가' 버튼이 있는 부분이다.2. TodoBoard: 투두리스트가 보여질 공간이다.3. TodoItem: 투두리스트 중 하나의 투두가 차지하는 공간이다. 이렇게 세개의 컴포넌트로 분리했다.      이..

개인과제 2024.08.13