useRef란 뭘까? `useRef` 는 이름부터 Reference(참조) 를 만드는 Hook입니다.또,, `useState`와 비슷합니다.. 헷갈릴 수 있지만 사용 목적과 동작 방식은 꽤 다릅니다. useRef VS useState항목useRefuseState역할참조 객체 생성상태 값(State) 저장값 변경 시리렌더링 안 됨리렌더링 발생주요 용도DOM 접근 및 조작 가능, 값 유지용 변수UI 상태 관리 (ex. 토글, 입력값)값 접근 방식`ref.current`state 변수 이름 그대로 어떻게 사용할까요 ? import { useRef } from "react";const refObj = useRef(); // 초기값은 undefined 해당 refObj 를 console.log 로 찍어보면 `{..

`useEffect` 란 무엇인가? 바로 이전 글에서 React의 생애주기 (Life Cycle) 를 살펴봤는데요이제는 그 생애 주기 속에서 일어나는 사이드 이펙트(Side Effect)를 제어하는 방법인 `useEffect` 에 대해 알아봅시다. 사이드 이펙트란? : 쉽게 말해서 렌더링 외에 발생하는 모든 행동이라 보면 됩니다.서버에 데이터 요청하기 ( API 요청 )콘솔에 로그 찍기DOM에 직접 접근하기이벤트 리스너 등록/해제 하기타이머 설정 및 정리하기이런 것들이 모두 다 사이드 이펙트라고 볼 수 있다. `useEffec` 는 그럼 뭘 할까요 ? 바로 : 사이드 이펙트를 실행하는 함수 라고 보면 됩니다. 이 함수는 컴포넌트의 생애 주기 ( Mount, Update, Unmount ) 를 따라 실..

리액트 컴포넌트도 사람처럼 생애 주기가 있습니다.유아기 컴포넌트, 청소년기 컴포넌트, 성인기 컴포넌트는 아니고요... React에서는 Mount, Update, Unmount라는 세 가지 단계로 생애 주기를 구분합니다.  1. Mount ( 탄생의 순간 ): 컴포넌트가 화면에 처음 나타날 때 발생합니다.즉, 처음 렌더링되는 시점이죠 주로 사용하는 경우는 서버에서 데이터를 불러올 때 (`fetch`, `axios` 등)초기에 이벤트 리스너 등록 등 초기 설정할 때2. Update ( 변화의 순간 ): 컴포넌트가 리렌더링 될 때 발생합니다.`state`나 `props` 가 바뀔 때마다 다시 그려지는 과정입니다. 주로 사용하는 경우는특정 값이 변경될 때 콘솔에 로그를 찍거나DOM에 직접 접근해 효과를 줄 때 ..

`useState` 란 React 훅(Hook) 중 하나로, 컴포넌트에서 상태 (State) 를 관리하기 위해 사용된다.  상태는 컴포넌트에서 바뀔 수 있는 데이터를 의미한다, 예를 들어, 사용자 입력값, 클릭 횟수, API 에서 받아온 데이터 등이 상태로 관리된다.  useState 사용법은 먼저 `import { useState } from 'react';` 로 import 해 준 다음,  최상단에 `const [ count, setCount ] = useState(초기값);` 으로 사용할 수 있다 예시코드 import { useState } from 'react';function App() { // useState 사용법 const [count, setCount] = useState(초기값); ..