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..

수많은 디버깅을 하다보면, console.log를 미처 지우지 못해서 console.log 창이 지저분해지기도 하고, 디버깅의 편리를 위해 남겨두고 싶기도 한데요. 일일히 지우기도 번거로운 것이 사실입니다.  빌드 시에는 불필요한 수많은 console log들을 일괄적으로 없앨 수 있는 방법 정리해보았습니다.   vite.config.js 설정 export default defineConfig({ build: { minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true }, format: { comments: false }..

리액트의 자주 사용하는 훅인 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 함수 ] = 생성자(초기값) 을 의미합니..