코딩자율학습 리액트 프런트엔드 개발 입문 2주차 학습 후기
이번 포스팅은 React 학습 2주차 후기입니다. 지난주에 이어 UI를 유연하게 만들기 위한 조건부/반복 렌더링, 폼상태 관리와 밸리데이션, 그리고 작은 실습들을 완성시켜 보았습니다. 이번 주도 매일 공부한 내용을 간단히 정리해 공유합니다.
6일차 : 계산기 만들기
https://samparkblog.com/calculator
지난주에 배운 useState와 이벤트 핸들러로 간단한 계산기를 만들어보았습니다. 숫자/연산 버튼 클릭 시 화면 값이 바뀌도록 상태를 분리해서 관리했고, 동작 과정을 하나씩 확인하며 연결했습니다.
CSS는 제공된 소스를 그대로 사용해 빠르게 화면을 구성했습니다. 기능 완성 후에는 빌드해서 업로드까지 해보며 간단히 배포 경험도 했습니다.
소스를 나눠서 관리하니 코드가 이해하기 쉬웠고, 클릭 이벤트 흐름을 따라 디버깅하기 편리했습니다.
7일차: 조건부 렌더링과 반복 렌더링
조건부는 if처럼 참/거짓에 따른 다른 컴포넌트를 보여주고, 삼항 연산자로도 간단히 표현할 수 있음을 확인했습니다.
예시에서는 로그인 상태에 따라 Login/Logout 컴포넌트를 바꿔 렌더링했습니다.
반복은 배열 데이터를 화면에 뿌리는 연습을 했고, map으로 리스트를 렌더링해 보았습니다. for, forEach도 가능하지만 리액트에서는 map이 가장 자연스러웠습니다.
8~9일차: 폼 다루기
제어 컴포넌트는 입력값을 상태로 관리하고, 비제어 컴포넌트는 DOM이 값을 들고 있는 방식이라 차이를 비교하며 실습했습니다. 저는 제어 컴포넌트(useState)가 더 익숙했습니다.
반복되는 onChange 코드를 줄이기 위해 커스텀 훅(useInput)을 사용해 value와 onChange를 묶어 이메일/비밀번호 입력을 간단히 관리해 봤습니다.
폼 밸리데이션은 기본 규칙(이메일의 @, 비밀번호 길이 등)을 직접 작성해 보고, Formik으로 에러 메시지와 제출 흐름을 구성하는 방법까지 연습했습니다. 라이브러리를 쓰니 상태/검증 코드가 깔끔해졌습니다.
또, 리액트 19에서는 ref를 컴포넌트에 일반 prop처럼 전달해 내부에서 바로 구조 분해로 쓰는 방식이 가능해져서, 이전처럼 forwardRef를 꼭 쓰지 않아도 되어 코드가 단순해졌습니다.
10일차: 할 일 관리 애플리케이션 만들기
오늘은 지금까지 배운 내용으로 할 일 관리 을 직접 만들어 보았습니다. 컴포넌트를 버튼, 입력창, 리스트 아이템 등으로 나눠서 작성했고, 할 일 추가, 수정, 삭제 기능등을 구현했습니다. 생각보다 실습해보는데 시간이 많이 걸려서 하루 학습 분량으로는 좀 많다고 느겼습니다.
완성한 코드는 빌드 후 블로그에 업로드하여 간단히 배포까지 진행했습니다. 실제 페이지에서 동작을 확인하니 그동한 공부한 것이 모두 포함되어 있어서 공부하면서 내가 부족한 부분이 어떤 것인지도 알게 되는 시간이였습니다.
컴포넌트를 작게 나누는 것이 나중에 재사용성에 도움이 된다는 것을 실습을 통해서 실질적으로 이해할수 있기도 했습니다.
2주차 마무리
이번 주는 간단한 웹을 끝까지 만들어 보며 학습했습니다. 조건부, 반복 렌더링, 폼과 밸리데이션, ref를 연결해 실제 동작을 확인했습니다. 작은 단위의 입력 처리 코드는 커스텀 훅으로 묶어 읽기 쉽게 만들었고, Formik으로 에러 메시지와 검증 흐름을 일관돠게 관리해 보았습니다. 컴포넌트를 기능별로 나누니 상태 흐름이 눈에 잘 들어왔고, 빌드와 업로드까지 경검하면서 작성한 코드가 실제 페이지에서 어떻게 보이는지 확인할 수 있었습니다.
