한 걸음씩

[기능 설명] 총 4개의 탭이 있다 '+'를 누르면 1씩 증가, '+++'를 누르면 3씩 증가 'hide details'를 누르면 본문 내용이 보이지 않고 'show details'를 누르면 본문 내용이 보인다 'undo'는 카운트된 숫자를 바로 초기화, 'undo in 2s'는 카운트된 숫자를 2초 후 초기화 const content = [ { summary: 'React is a library for building UIs', details: 'Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Occaecat cupidatat non proident, sunt in culpa qui officia..

2024.01.26 - [React] - [React] How React works

# exercise 1: Create the stars export default function App() { return ( ) } function StarRating({ maxRating = 5 }) { const [rating, setRating] = useState(1) const [tempRating, setTempRating] = useState(0) function handleRating(rating) { setRating(rating) } return ( {Array.from({ length: maxRating }, (_, i) => ( = i + 1 : rating >= i + 1} onRate={() => handleRating(i + 1)} onHoverIn={() => setTem..

할 일을 입력하고 체크박스에 체크를 하면 체크된 할 일은 맨 마지막으로 정렬되고 체크를 해지하면 원래 입력 상태로 다시 돌아간다. 👇🏻 input태그의 checkbox 속성 상태가 true/false인 것을 어떻게 불러왔을까?👇🏻 할 일을 정렬하기 위해서는 입력값의 체크상태를 알아야 하는데 그 때문에 Form컴포넌트에서 newItem 객체를 만들어 체크상태를 저장할 수 있도록 하였다. 그다음에 todoList 값을 업데이트하고 App 컴포넌트에서 초기에 할 일을 업데이트하는 핸들러 함수에 newItem를 인자로 받아 실시간으로 업데이트 할 수 있도록 하였다. 자식 컴포넌트에서 부모 컴포넌트 함수를 호출하여 상태를 업데이트하는 방식은 일반적으로 'Lifting State Up'이라고 부른다. 이 방식은 컴..

◇ 프로젝트 이름 Travel List ◇ Tech HTML&CSS React ◇ 프로젝트 설명 이 여행 품목 관리 프로젝트는 여행에 필요한 물품을 간편하게 입력하고 체크할 수 있도록 구성했다. 전체 프로젝트는 Logo, Form, Packinglist, Item, State 총 5개의 컴포넌트로 세분화되어 있어 재사용성을 높이고 코드의 가독성을 향상하는 데 주력했다. Form 컴포넌트에서는 품목과 해당 품목의 개수를 입력하고 선택할 수 있는 기능을 제공하여 사용자가 손쉽게 정보를 제출할 수 있도록 구현했다. Packinglist 컴포넌트에서는 Form에서 입력받은 정보들을 목록 형태로 화면에 출력하며, 이를 더 가독성 있게 표현하기 위해 Item 컴포넌트를 도입했다. 또한 정렬 기능을 추가하여 사용자가..