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 로 찍어보면 `{..

useReducer은 뭘까?useState와 거의 비슷하다고 볼 수 있다..사실 더 정교하게 상태를 제어할 수 있는 Hook 입니다.모든 `useState` 는 `useReducer`로 대체가 가능합니다!특히 상태가 복잡해질수록 `useReducer`가 더 깔끔하고 유지보수에 좋습니다~~. 왜 `useReducer`를 써야할까? `useState`를 사용한다면, 컴포넌트 내부에 상태 관리 코드를 작성해야한다는 점이 있었죠, 그렇게 되면 코드가 섞이게 됩니다.(App에 작성하면 ,, 너무 복잡혀요)function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(3); const onCreate = (c..

`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(초기값); ..

리액트란 뭘까? Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리입니다. 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술임.  라이브러리란 뭘까? 프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해 놓는것을 의미.프레임워크랑은 다른 의미  React의 기술적인 특징1. 컴포넌트를 기반으로 UI를 표현한다.2. 화면 업데이트 구현이 쉽다.3. 화면 업데이트가 빠르게 처리된다.  컴포넌트를 기반으로 UI를 표현한다. 1. 컴포넌트 (Component) : 우리말로 "구성요소" 라는 뜻 즉 화면을 구성하는 요소, UI 를 구성하는 요소를 말함.*마크업 (Mark UP) : UI 구현이라고 생각하면 됨.중복 코드 발생을 최소화 하기 위함. 또한 유지보수..