이번 글에서는 리액트에서 말하는 상태의 정의 및 분류와 상태 관리를 잘 하기 위해 알아둬야할 것들을 정리해보았습니다.  1️⃣ 리액트의 상태리액트 어플리케이션에서의 상태는 렌더링에 영향을 줄 수 있는 동적인 데이터 값을 의미합니다.리액트 공식 문서의 정의는 아래와 같습니다." 렌더링 결과에 영향을 주는 정보를 담은 순수 자바스크립트 객체"  2️⃣ 상태의 분류1) 지역 상태 (Local State)컴포넌트 내부에서 사용되는 상태입니다. 체크 박스의 체크 여부, 폼의 입력값 등에 해당되며, 주로 useState 훅을 많이 사용합니다. 경우에 따라서는 useReducer를 사용하기도 합니다.2) 전역 상태 (Global State)앱 전체에서 공유되는 상태를 의미합니다. 여러 개의 컴포넌트가 전역 상태를 사..

React로 todoList 만들어보며 사용한 주요 개념들을 정리해보았습니다.    import "./App.css";import Header from "./component/Header";import TodoEditor from "./component/TodoEditor";import TodoList from "./component/TodoList";import { useState, useRef } from "react";function App() { const idRef = useRef(3); const mockTodo = [ { id: 0, isDone: false, content: "React 공부하기", createDate: new Date().get..

리액트의 자주 사용하는 훅인 useRef 와 useEffect에 대해 정리해보았습니다. useRef는 리액트의 DOM 요소들을 직접 조작하고자 할 때 사용하며, useEffect의 경우 마운트, 업데이트, 언마운트와 같은 리액트의 라이프 사이클을 조절하기 위해 사용합니다.  useEffect의 경우 이번 시간에는 간단한 사용법까지만 알아보고, 다음 글에 이어서 라이프 사이클을 제어하는 방법을 상세히 알아보겠습니다.  useRef리액트의 Ref(Reference)를 이용하면 DOM 요소들을 직접 조작할 수 있습니다. 마치 실제 DOM의 getElementById()와 비슷한 역할을 한다고 볼 수 있습니다.  사용법useRef를 이용해 특정 요소에 focus를 주는 jsx 코드를 구현해보았습니다.  1) 먼..

State는 상태라는 뜻으로, 어떤 사물의 형편이나 모양을 의미합니다. 전구의 On/Off 상태와 유사하게 리액트의 컴포넌트도 State(상태)따라 다른 결과를 렌더링 할 수 있습니다. 리액트에서 사용되는 State에 대해 좀 더 이해하면서, 사용하는 방법도 함께 정리해보았습니다.  컴포넌트와 State(상태)React의 컴포넌트는 사용자의 행위나 시간 변동에 따라 값이 변하는 동적인 컴포넌트로 만들 수 도 있습니다. 이를 위해 사용되는 기능이 바로 React의 State 입니다.  State의 기본 사용법State를 사용하려면 먼저 useState라는 함수를 통해 State를 생성해주어야 하는데요.아래와 같이 생성해주면 되고, 각각은 [ State 변수, set 함수 ] = 생성자(초기값) 을 의미합니..