오늘은 리액트(React) 강의를 들으며 아주 흥미로운 실습을 진행했다.
바로 '단위 변환기(Converter)' 만들기!
처음에는 코드가 조금 헷갈리는 듯했지만, 한 줄씩 따라가다 보니 어느덧 분(Minutes)을 시간(Hours)으로 바꾸는 멋진 변환기가 완성되었다.
💡 리액트의 핵심, Controlled Component와 useState
이번 실습에서 가장 크게 배운 점은 'Controlled Component(제어 컴포넌트)' 방식이다.
- useState를 이용해 입력값을 상태(state)로 관리하기
- 사용자가 입력하는 값을 리액트가 직접 제어하기
단순히 HTML input 태그를 쓰는 게 아니라, 리액트가 모든 데이터를 꽉 쥐고 관리한다는 개념이 처음에는 낯설었지만,
직접 코드를 짜보니 왜 이렇게 쓰는지 조금씩 이해가 가기 시작했다.
특히 invert 버튼 하나로 입력 단위를 휙휙 바꾸는 로직을 구현할 때는
"와, 이게 리액트의 재미구나!" 싶어 눈이 번쩍 뜨였다. (잠시였지만... 😂)
🏃♂️ 응용은 실력 성장의 지름길: Km ↔ Miles 변환기
강의에서 배운 Minutes ↔ Hours 변환기 구조를 그대로 활용해, 나만의 Km ↔ Miles 변환기도 만들어 봤다.
사실 기존 코드를 많이 참고하긴 했지만, 구조를 머릿속으로 그리며 데이터의 흐름을 직접 바꿔보는 과정이 정말 큰 도움이 됐다.
리액트를 공부하다 보면 처음에는 무작정 따라 치는 것 같아 불안할 때가 있는데, 오늘처럼 "아, 이런 구조로 돌아가는 거구나!" 하고 깨닫는 '유레카'의 순간이 오면 그 불안함이 확신으로 바뀐다.
🌙 오늘의 마무리는 뿌듯함으로
하루 종일 리액트와 씨름했더니 지금은 눈이 너무 감긴다.
하지만 목표했던 강의를 거의 다 들어가고 있어서 마음만은 아주 가볍다.
내일의 목표:
- 영화 웹사이트 만들기 강좌 완강하기 🎬
- 드디어 기다리던 ReactJS Master Class 입성하기!
조금씩이지만 확실하게 한 걸음씩 나아가고 있는 나 자신을 칭찬하며, 오늘은 이만 일찍 쉬어야겠다.
내일의 더 큰 성장을 위해! 오늘도 공부 완료. 🙂
#리액트공부 #ReactJS #useState #ControlledComponent #프론트엔드개발 #독학개발자 #오늘도성공