이번에는 React Hook 중 하나인 useRef를 이용해 컴포넌트 내부에서 값을 유지하는 방법과 특정 DOM 요소에 접근하는 방법을 알아보겠습니다.useRef는 Reference 객체를 생성하는 React Hook입니다.기본적인 사용 방법은 다음과 같습니다.const refObject = useRef()초기값을 전달할 수도 있습니다.const refObject = useRef(0)1. useRef란?useRef를 호출하면 current라는 프로퍼티를 가진 Reference 객체가 생성됩니다.const refObject = useRef(0)console.log(refObject)개념적으로 다음과 같은 객체를 생각할 수 있습니다.{ current: 0}따라서 Reference 객체에 저장된 값을 사용하..

이번에는 React에서 자주 사용하게 되는 React Hooks가 무엇인지 알아보겠습니다.앞에서 살펴본 useState, useRef 역시 모두 React Hooks입니다.React를 공부하다 보면 다음과 같은 함수들을 자주 만나게 됩니다.useStateuseRefuseEffectuseReducer이러한 기능들을 통틀어 React Hooks라고 합니다.1. React Hooks란?React Hooks란 함수 컴포넌트에서 React의 다양한 기능을 사용할 수 있도록 해주는 기능입니다.과거 React에서는 컴포넌트를 크게 두 가지 방식으로 만들 수 있었습니다.Class ComponentFunction Component예전에는 두 컴포넌트 사이에 기능적인 차이가 있었습니다.Class 컴포넌트는 State와 같..

이번에는 React의 State를 활용하여 사용자가 입력한 값을 관리하는 방법을 알아보겠습니다.간단한 회원가입 폼을 만들면서 다음 정보를 입력받겠습니다.이름생년월일국적자기소개이번 내용은 두 가지 방식으로 나누어 살펴보겠습니다.State로 각각의 사용자 입력 관리하기하나의 State 객체로 사용자 입력 통합 관리하기1. React에서 사용자 입력값 관리하기HTML의 input, select, textarea 같은 입력 요소는 사용자가 값을 입력하거나 선택할 수 있습니다.React에서는 이러한 값을 단순히 화면에 표시하는 것뿐만 아니라, State와 연결하여 현재 입력값을 관리할 수 있습니다.기본적인 흐름은 다음과 같습니다.사용자 입력 ↓onChange 이벤트 발생 ↓이벤트 객체(e)에서 입력값 ..

이번에는 React의 State와 Props의 관계, 그리고 컴포넌트가 언제 리렌더링되는지 알아보겠습니다.특히 서로 관련 없어 보이는 Bulb와 Counter 컴포넌트가 왜 함께 리렌더링되는지 확인하고, 컴포넌트를 분리하는 이유도 함께 살펴보겠습니다.1. State를 Props로 전달하기React에서는 부모 컴포넌트가 관리하는 State를 자식 컴포넌트에 Props로 전달할 수 있습니다.예를 들어 App 컴포넌트에서 전구의 상태를 관리하고, Bulb 컴포넌트에 전달해보겠습니다.import './App.css'import { useState } from 'react'const Bulb = ({ light }) => { console.log(light) return ( {light ===..

React State로 상태 관리하기-> useState와 리렌더링 이번에는 React의 핵심 기능 중 하나인 State(상태)에 대해 알아보겠습니다.이전에는 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 이벤트 핸들링을 통해 버튼 클릭과 같은 사용자 행동을 처리했습니다.하지만 실제 웹 애플리케이션에서는 사용자 행동에 따라 화면의 데이터가 변경되어야 합니다.예를 들어 다음과 같은 경우입니다.버튼을 클릭하면 숫자가 증가스위치를 클릭하면 ON/OFF 변경입력창에 입력한 내용이 화면에 반영로그인 상태에 따라 다른 화면 표시이처럼 변하는 데이터를 관리하고, 데이터가 변경되었을 때 UI를 다시 렌더링하기 위해 사용하는 것이 State입니다.1. State란?State는 컴포넌트 내부에서 ..