[DevCourse] 생성형 AI 활용 백엔드 데브코스 11일차

오늘은 React를 사용하면서 “화면이 반응하고 바뀌는 흐름”을 실감할 수 있었던 날이었다.

그동안은 정적인 UI만 구성했다면, 이제는 사용자의 입력에 따라 컴포넌트가 변하고, 상태가 업데이트되고, 이벤트가 발생하는 흐름을 경험했다.

예제를 하나씩 따라 하면서 React가 어떤 구조로 동작하는지를 점점 더 구체적으로 이해하게 되었다.

---

📌 오늘 배운 내용 간단 정리

1. state와 이벤트 처리

• useState()로 컴포넌트 내부의 상태값을 관리하고
• 버튼 클릭, 입력 변화 같은 사용자 이벤트에 따라 상태를 업데이트
• 상태가 바뀌면 자동으로 다시 렌더링 된다는 구조가 처음엔 낯설었지만,
• 사용해 보니 굉장히 명확하고 직관적이었다

2. 클래스형 컴포넌트 vs 함수형 컴포넌트

• 클래스형에서는 this.state와 this.setState()
• 함수형에서는 useState()를 사용 → 함수형이 훨씬 깔끔하고 가독성이 좋아 보였다

3. 생명주기와 Hook의 개념

• componentDidMount, componentDidUpdate, componentWillUnmount 같은
• 생명주기 메서드의 흐름을 이해했고,
• 이를 함수형 컴포넌트에서도 다룰 수 있게 도와주는 Hook (useEffect)의 등장을 배웠다

---

✨ React 실습 소감

이전에 단순히 컴포넌트를 만들고 props를 넘기던 단계와 달리,

오늘부터는 “상태”가 생기고, 그 상태가 변화하면서 화면도 바뀌는 동적인 흐름이 생겼다.

예제를 실습하면서 실제 웹앱이 어떻게 사용자와 반응하는지를 직접 구현해 보니,

React의 구조가 머릿속에 조금씩 그려지기 시작했다.

 

특히 JSX 안에서 이벤트를 설정하고,

입력값을 실시간으로 상태에 반영해서 동작하는 흐름은

지금까지 배운 자바스크립트와는 또 다른 개발 방식처럼 느껴졌다.

초반엔 생소했지만, 따라 하다 보니 점점 재밌어졌다.

 

---

🧡 느낀 점

React를 실습하면서 상태 관리와 렌더링, 이벤트 흐름을 다루다 보니

드디어 정적인 마크업을 넘어서 “사용자와 상호작용하는 웹페이지”를 만들고 있다는 실감이 났다.

 

React를 공부하면서 프론트엔드 생태계가 얼마나 빠르게 변화하고 있는지 다시금 느꼈다.

계속해서 새로운 기능과 개념이 추가되고 있고, 그걸 익히는 건 쉽지 않겠지만 그래도 지금은 배우는 게 꽤 재밌고 흥미롭다.

 

조금씩 어려워지고 있지만 내일도 열심히 따라가 보자!!