React 기초: useState와 조건부 렌더링을 활용한 인터랙티브 전구 컴포넌트 만들기

핵심 기술

이 글은 React의 useState 훅을 사용하여 컴포넌트의 상태를 관리하고, 상태 값에 따라 다른 이미지를 보여주는 조건부 렌더링 기법을 활용하는 방법을 안내합니다. 버튼 클릭 이벤트를 통해 전구의 켜고 끄는 상태를 전환하는 실습 예제를 제공합니다.

기술적 세부사항

• 상태 관리: useState 훅을 사용하여 전구의 현재 상태(isOn)를 boolean 값으로 관리합니다. 초기 상태는 false (꺼짐)로 설정됩니다.
• 조건부 렌더링: isOn 상태 값에 따라 다른 <img> 태그를 렌더링합니다. true일 때는 켜진 전구 이미지(/bulb1.jpg), false일 때는 꺼진 전구 이미지(/bulb2.jpg)를 표시합니다.
• 이벤트 처리: 버튼의 onClick 이벤트 핸들러를 통해 setIsOn 함수를 호출하여 isOn 상태를 토글(반전)시킵니다. 버튼 텍스트 또한 isOn 상태에 따라 동적으로 변경됩니다.
• 이미지 경로: React 개발 서버 환경에서 public 폴더에 이미지를 배치하여 /bulb1.jpg 와 같이 직접 경로로 접근하는 방법을 설명합니다.

개발 임팩트

이 컴포넌트 구현을 통해 React의 핵심 기능인 상태 관리와 조건부 렌더링에 대한 기본적인 이해를 높일 수 있습니다. 이는 사용자 인터페이스의 동적인 변화를 구현하는 데 필수적인 기술이며, 시각적인 결과물을 통해 학습 동기를 부여합니다.

관련 Git 정보

• name: react
  url: https://github.com/facebook/react
  relevance: "95%"
  description: React 라이브러리 자체의 공식 저장소입니다. 이 글에서 소개하는 useState 및 컴포넌트 기반 개발과 같은 모든 React 기능의 근간이 되는 코드입니다.
• name: create-react-app
  url: https://github.com/facebook/create-react-app
  relevance: "80%"
  description: React 프로젝트를 쉽고 빠르게 설정할 수 있도록 도와주는 도구입니다. 본문에서 /public 폴더에 이미지를 넣고 src="/bulb1.jpg" 와 같이 접근하는 방식은 create-react-app 환경을 기준으로 설명하고 있어 관련성이 높습니다.
• name: react-examples
  url: https://github.com/prakhar1989/react-examples
  relevance: "70%"
  description: React의 다양한 예제 코드들을 모아놓은 저장소로, 상태 관리, 이벤트 핸들링 등 이 글에서 다루는 기초적인 개념들을 다른 방식으로 구현한 사례들을 찾아볼 수 있습니다.