React 학습 여정 – Day 4: 첫 번째 미니 프로젝트 (좋아요, 싫어요 & 댓글 박스)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 초보 개발자 및 프론트엔드 학습자

핵심 요약

• useState 훅을 사용하여 Like, Dislike, command, commandList 상태 관리
• onChange 이벤트로 textarea 입력 처리 및 command 상태 업데이트
• spread operator(...) 사용하여 commandList 배열에 댓글 추가 및 동적 렌더링
• map() 함수로 JSX 내 동적 리스트 렌더링

섹션별 세부 요약

1. useState Hook 사용

• Like, Dislike 상태는 좋아요/싫어요 카운터 관리
• command 상태는 textarea 입력값 저장
• commandList 상태는 댓글 목록을 배열 형태로 저장
• 상태 초기화: useState(0) 및 useState([]) 사용

2. Like & Dislike 버튼 구현

• 버튼 클릭 시 setLike() 또는 setDislike() 호출
• 상태 업데이트 함수를 통해 카운터 증가
• onClick 이벤트 핸들러 직접 연결

3. Textarea 및 댓글 제출

• onChange 이벤트로 command 상태 실시간 업데이트
• Submit 버튼 클릭 시 commandList 배열에 command 추가
• spread operator([...commandList, command]) 사용하여 기존 배열 복사 및 새 항목 추가

4. 댓글 목록 렌더링

• commandList.map()을 통해 배열 요소 반복
• 각 요소를
로 렌더링하여 목록 표시
• JSX 내 map() 함수 사용 시 key 속성 필수

결론

• useState와 map()은 React에서 상태 관리 및 동적 UI 렌더링의 핵심 도구
• spread operator 사용을 잊지 말고, onChange 이벤트와 textarea 연동 방식을 정확히 이해해야 함
• 실무에서는 상태 업데이트 시 불변성 유지와 리스트 키 지정을 반드시 적용해야 함