잇!(IT) 블로그

- 위 화면의 왼쪽은 새로운 글을 작성하는 화면, 우측은 작성된 글을 수정하는 화면이다. - 아래 코드를 통해 자세히 알아보겠다. - New.js import { useEffect } from "react"; import DiaryEditor from "../components/DiaryEditor"; const New = () => { // 상단 title 바꾸기 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감정 일기장 - 새일기`; }, []); return ( ); }; export default New; - 새로운 일기를 작성하기 위환 화면이다. Di..

- 위 사진은 최종 결과물의 홈화면이다 - 아래는 코드에 대한 분석이다. - App.js는 React 애플리케이션의 핵심 컴포넌트 중 하나로, 전체 애플리케이션의 렌더링 구조를 정의하는 역할을 한다. - React 애플리케이션은 컴포넌트들의 계층 구조로 이루어지며, App.js는 이 계층 구조의 최상위 컴포넌트이다. - App.js import React, { useEffect, useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Link, Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/..

- Router - Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리이다. - 클라이언트 사이드 라우팅은 사용자가 웹 애플리케이션 내에서 다양한 페이지 또는 뷰로 이동할 수 있는 기능을 제공하는 것을 의미한다. - 페이지를 새로 로드하지 않고도 애플리케이션 내에서 다른 컴포넌트나 뷰로 전활할 수 있게 해준다. 1. Route : Route 컴포넌트를 사용하여 URL 경로와 연결된 React 컴포넌트를 정의한다. 2. Router : Router 컴포넌트는 애플리케이션의 최상위 컴포넌트로 사용된다. 2.1. BrowerRouter : HTML5 History API를 사용하여 URL을 관리한다. 대부분의 경우에 사용된다. 2.2. HashRouter : URL의 ..

- useReducer - useReducer는 컴포넌트에서 상태변화 로직을 분리하기 위해 사용한다. const [state, dispatch] = useReducer(reducer, initialState); ----------------------------------- function reducer(state, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } } ------------------------------------- dispatch({ type:..

useMemo - useMemo란 1. 성능 최적화를 위해 사용된다. 2. 이전 결과를재사용함으로써 렌더링 성능을 향상시킬 수 있다. 결과값이 변하지 않을 경우 리렌더링 할 때 마다 연산을 하게 되면 성능 최적화가 되지 않기 때문이다. - 위와 같이 각 일기(객체)에는 감정 점수를 할당 할 수 있고, 중간에 결과값 같이 감정에 따른 비율을 측정하는 코드를 추가할 것이다. - App.js ....... const getDiaryAnalysis = () => { console.log("일기 분석 시작"); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goo..

https://insoobaik.tistory.com/505 React - 사용자 입력 처리 / DOM 조작(useRef) / API 호출 * 아래 코드를 확인하기 전 알아야 할 것이 있다. React는 같은 레벨에서 데이터를 주고 받을 수 없기 때문에 부모 컴포넌트로 데이터를 전달하고, 부모 데이터로부터 데이터를 전달 받아야 한다. insoobaik.tistory.com - 앞서서 사용자 입력, DOM 조작(useRef), API 호출에 대해 알아보았다. - 리스트 렌더링 / 데이터 추가, 삭제, 수정 - 이번에는 받아온 데이터 리스트를 렌더링하고, 데이터 추가, 삭제, 수정 하는 것에 대해 알아 볼 것이다. - App.js ...... return ( ); } - DiaryList 컴포넌트로 onEd..

* 아래 코드를 확인하기 전 알아야 할 것이 있다. React는 같은 레벨에서 데이터를 주고 받을 수 없기 때문에 부모 컴포넌트로 데이터를 전달하고, 부모 데이터로부터 데이터를 전달 받아야 한다. - 위와 같이 Event를 통해 부모 컴포넌트에서 자식 컴포너트로부터 데이터를 전달받고, 자식 컴포넌트로 데이터를 전달하는 것을 확인 할 수 있다. - 사용자 입력, 입력 화면 - App.js import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; import Lifecycle from "./Life..