키모스토리

리액트 라우터 돔(React Router DOM)리액트 애플리케이션에서 페이지 간 이동(라우팅)을 쉽게 처리하기 위한 라이브러리입니다.이 라이브러리를 사용하면 리액트 앱을 여러 페이지처럼 구성하고, 각 페이지의 URL 경로를 정의할 수 있습니다.📌 SPA(Single Page Application)SPA는 기존 웹사이트와 다르게 한 개의 HTML 페이지에서 모든 작업을 처리하는 방식입니다.일반 웹사이트는 사용자가 새로운 페이지로 이동할 때마다 페이지 전체를 새로고침하지만, SPA는 필요한 부분만 업데이트합니다.이렇게 하면 속도도 빠르고 트래픽도 절약할 수 있습니다.📌 React Router 주요 패키지react-router : 웹과 앱 모두에서 사용할 수 있는 기본 라우터 라이브러리react-rout..

CSS in JS?CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌었습니다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹 개발의 패러다임이 바뀌고 있습니다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있습니다. 따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS,..

1. 인라인(inline) styling 적용- html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으로 입력한다.   - 속성명은 케밥 케이스(kebab case)가 아닌, camelCased property names 를 사용한다.      (Html에서 background-color는 react에서 backgroundColor 이다.)   - 인라인 스타일 적용은 가장 높은 우선순위를 갖는다.import React from 'react'export default function App() { return ( 인라인 스타일 입니다. )..

Hook useRef을 사용하면 렌더링 간에 값을 유지할 수 있습니다.업데이트 시 다시 렌더링을 발생시키지 않는 변경 가능한 값을 저장하는 데 사용할 수 있습니다.DOM 요소에 직접 접근하는 데 사용할 수 있습니다.const refContainer = useRef(initialValue); Hook을 사용하여 애플리케이션이 몇 번 렌더링되는지 세어보려고 하면 useStateHook 자체가 다시 렌더링을 발생시키기 때문에 무한 루프에 빠지게 됩니다. 이를 방지하려면 useRefHook을 사용하면 됩니다.import { useState, useEffect, useRef } from "react";export default function App() { const [inputValue, setInputVal..

useMemo다시 렌더링하는 사이에 계산 결과를 캐시할 수 있게 해주는 React Hook입니다.const cachedValue = useMemo(calculateValue, dependencies) 메모이제이션은 값을 캐싱하여 다시 계산할 필요가 없도록 하는 것으로 생각하면 됩니다.성능useMemo을 사용하면 비용이 많이 들고 리소스를 많이 사용하는 기능이 불필요하게 실행되는 것을 방지할 수 있습니다.이 예에서는 모든 렌더링에서 실행되는 비용이 많이 드는 함수가 있습니다.카운트를 변경하거나 할 일을 추가할 때 실행이 지연되는 것을 느낄 수 있습니다. // 성능이 좋지 않은 예import { useState } from "react";import ReactDOM from "react-dom/client"..

문서 : https://ko.legacy.reactjs.org/docs/hooks-effect.html useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook입니다.useEffect(setup, dependencies?) Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. Hook을 이용하는 예시import React, { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(() => { // 브라우저 API를..

useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook입니다.const [state, setState] = useState(initialState)   참고 : https://ko.react.dev/reference/react/useState useState – ReactThe library for web and native user interfacesko.react.dev import { useState } from "react";import "./App.css";import Sub from "./Sub";function App() { console.log("App실행"); // useState : 데이터를 상태값으로 설정 // React안에 hooks 라이브러리 상태값..

App.js (배열데이터를 ,react에서 반복 표시)import "./App.css";function App() { const list = [1, 2, 3]; return ( {list.map((n) => ( {n} // key 속성 추가 ))} );}export default App;

JSX(Javascript Syntax eXtension)는 Javascript 확장한 문법이다.  JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 기본적으로 HTML, JS, CSS 구문을 그대로 이용이 가능하며{ } 블럭 안에서 변수, 상수, 함수 등을 호출하여 사용 할 수 있다. JSX 기초(1) App() 함수 밖에 혹은 안에 변수, 상수, 함수 선언가능 (2) return 시에 하나의 Dom만 리턴할 수 있다. (하나의 Dom안에 구조를 생성하라) (3) if문 사용안됨, 대신 3항 연산자를 사용 ( (조건) ? 참일때 : 거짓일때 ) (4) 조건부 렌더링 (조건 && 값..

arrow function함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법// Before Arrowlet sum1 = function(a, b) { return a + b;};console.log(sum1(10, 20));// With Arrow Function:let sum2 = (a, b) => a+b;console.log(sum2(10, 20));(a, b) => a + b는 인수 a와 b를 받는 함수입니다.(a, b) => a + b는 실행되는 순간 표현식 a + b를 평가하고 그 결과를 반환합니다. 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다. 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.let double = n => n * 2;// let d..

async 함수async 키워드부터 알아봅시다. async는 function 앞에 위치합니다.async function f() { return 1;}function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환됩니다. 직접 확인해 봅시다. async function f() { return 1;}f().then(alert); // 1명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일합니다. async function f() { return Promise.resolve(1)..

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. Promise 는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '프로미스(promise)'를 반환합니다.Promise는 다음 중 하나의 상태를 가집니다.대기(pending): 이행하지도, 거부하지도 않은 초기 상태.이행(fulfilled): 연산이 성공적으로 완료됨.거부(rejected): 연산이 실패함.대기 중인 프로미스..