Per ardua ad astra.

라우터 설정 방법 (React Route)들어가며React Router(@react-router-dom@)을 이용하여 라우터를 설정하는 방법을 정리해본다. 방법패키지 설치하기@react-router-dom@ 패키지를 설치하려면 터미널에 아래 명령을 실행한다.$ npm install react-router-dom # yarn add react-router-dom 방법 1@createBrowserRouter@를 이용하는 방법이다.import { createBrowserRouter, RouterProvider,} from "react-router-dom";import HomePage from "./pages/Home";import ProductsPage from "./pages/Products";co..

리액트에서의 상태 관리 방법리액트(React)에서 상태 관리 방법에 대해 알아보자.리액트에서는 상태 관리를 위해 여러 가지 방법을 사용할 수 있으며, 상황에 따라 적절한 방법을 선택하는 것이 중요하다. 상태 관리 방법1. 지역 상태(Local State)리액트의 useState 훅을 사용하여 컴포넌트 내부에서 상태를 관리할 수 있다.작은 규모의 애플리케이션이나 단일 컴포넌트에서 상태 관리가 필요한 경우 적합하다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count..

요소에서 제출(Submit) 버튼 사용 시 기본 동작 막는 방법들어가며@@ 요소 안에 @type@이 @submit@인 버튼을 두고, 클릭할 때, 폼 제출 효과가 발생한다.해당 버튼을 클릭할 때 폼 데이터가 서버로 전송되면서 페이지가 새로고침 되는데, 이것은 폼의 기본 동작이다. // ... 제출 이때 폼 제출 효과 막을 수 있는 방법을 정리해본다. 방법방법 1 : @@ 요소의 @type@ 속성을 @button@으로 지정하기@@ 요소의 @type@ 속성을 @submit@이 아닌 @button@으로 지정하는 방법이다.function handleSubmit() { console.log("Submitted!");} 로그인  방법 2 : @@ 요소의 @onClick@ 이벤트 함수에 @event...

memo() 사용할 때 주의할 점들어가며리액트(React.js)의 @memo()@를 사용할 때 주의할 점을 정리해본다. memo()개념함수형 컴포넌트를 메모이제이션(Memoization)하여 불필요한 리렌더링을 방지하는 역할을 한다.주로 성능 최적화를 위해 사용된다.import { memo } from 'react';const MyComponent = memo(function MyComponent({ prop1, prop2 }) => { // ...});export default MyComponent; 기본적으로 컴포넌트의 @props@가 변경되지 않으면 컴포넌트를 다시 렌더링하지 않는다.@props@의 얕은 비교(Shallow Comparison)를 통해 이루어진다.얕은 비교는 기본 자료형(숫자, 문..

useEffect와 useCallback들어가며리액트에서 사용되는 @useCallback@과 @useEffect@에 대해 알아보자. @useCallback@리액트에서 함수를 메모이제이션(Memoization)하는 데 사용된다.불필요한 함수의 재생성을 방지하고, 함수가 의존하는 값이 변경될 때만 새로운 함수를 생성하도록 할 수 있다. 예제 코드아래의 코드에서 @handleClick@ 함수는 @count@ 변수가 변경될 때만 재생성 된다.그렇지 않을 경우 @handleClick@ 함수는 재생성되지 않으며, 같은 함수를 계속 사용하게 된다.이렇게 할 경우 함수의 재생성을 최소화하여 성능 최적화를 하는데 도움을 줄 수 있다.import React, { useCallback, useState } from 'rea..

useReducer 훅들어가며리액트(React.js)에서 사용되는 @useReducer@ 훅에 대해 정리해본다. @useReducer@ 개념컴포넌트에 리듀서(Reducer)를 추가하는 리액트 훅const [state, dispatch] = useReducer(reducer, initialArg, init?)  (참고) 리듀스(Reduce, @reduce()@)배열의 각 요소에 대해 제공된 함수(@callback@ 함수)를 실행하고 하나의 결과값을 반환하는 메서드배열의 각 요소를 누적(Accumulate)하여 단일 값으로 줄이는 역할을 한다.주로 합계, 평균, 최대값, 최소값, 객체 생성 등 다양한 경우에 유용하게 사용된다.const array = [1, 2, 3, 4, 5];const result = a..

whitespace-pre-wrap 클래스들어가며테일윈드(Tailwind) CSS의 @whitespace-pre-wrap@ 클래스에 대해 알아보자.  @whitespace-pre-wrap@Tailwind CSS에서 사용하는 유틸리티 클래스 중 하나로, HTML 요소 내의 텍스트를 처리하는 방법을 지정한다.이 클래스를 사용하면 텍스트를 다음과 같이 처리할 수 있다. 공백 유지텍스트 내의 연속된 공백을 유지한다.여러 개의 공백이 있어도 하나로 축약되지 않는다. 강제 줄바꿈텍스트 내의 줄바꿈 문자를 유지한다.텍스트에 포함된 줄바꿈(@\n@)은 실제로 줄바꿈이 된다. 자동 줄바꿈텍스트가 요소의 너비를 초과하면 자동으로 줄이 바뀐다.이 클래스는 @white-space: pre-wrap;@ CSS 속성과 동일한 효..

map 함수를 사용할 때 중괄호({})와 소괄호(())들어가며리액트(React)에서 중괄호 @{}@와 소괄호 @()@는 주로 JSX 안에서 사용되며, 특히 @map()@ 메서드와 함께 사용될 때 주의해야 할 점이 몇가지 있다.@map@ 함수를 사용할 때 중괄호(@{}@)와 소괄호(@()@)를 사용하는 경우의 차이에 대해 알아보자. 중괄호(@{}@)자바스크립트 표현식(Expression)을 감싸기 위해 사용된다.중괄호를 사용할 때는 반드시 반환값이 있어야 하며, 명시적으로 @return@ 키워드를 사용해서 값을 반환해야 한다.여러 줄의 코드가 필요하거나 조건문 등 복잡한 로직을 작성해야 할 때 사용한다.const items = ['Apple', 'Banana', 'Cherry'];const listItem..

비주얼 스튜디오 코드(VS Code)에서 JSX 자동 완성 기능 켜는 방법들어가며비주얼 스튜디오 코드(VS Code)에서 @return@ 문 안에 JSX를 작성할 때, 자동 완성 기능(Auto Complete)을 사용하는 방법을 알아보자. 방법이 방법을 위해서는 VS Code 설정을 따로 해줘야 한다.우선, @Ctrl@(@Cmd@) + @,@를 눌러서 VS Code 설정 페이지를 연다. 그리고 상단의 @[Open Settings (JSON)]@ 아이콘을 클릭한다.그리고 아래의 코드를 @settings.json@ 코드 안에 넣어준다.{ ... "emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.syntaxProfiles"..

토스트 메시지 띄우기 간단 예제 (ReactDOM.createPortal)들어가며리액트(React.js)를 이용하여 구현해본 토스트(Toast) 메시지 띄우기 간단 예제 코드를 올려본다.기능을 구현하기 위해 @react-dom@ 패키지의 @createPortal@ 함수를 사용하였다. 코드 App.jsximport React from 'react';import Toast from './Toast';function App() { const [isToastVisible, setIsToastVisible] = React.useState(false); function handleEnrol() { setIsToastVisible(true); setTimeout(() => { setIs..

useImperativeHandle과 forwardRef들어가며리액트(React.js)에서 사용되는 @useImperativeHandle@과 @forwardRef@에 대해 알아보자.@forwardRef@와 @useImperativeHandle@은 컴포넌트 간의 참조를 다루기 위한 도구이다.이 두가지 개념을 이해하면 컴포넌트 외부에서 내부의 DOM 요소나 메서드에 접근할 수 있게 되어, 고급 컴포넌트 설계에 유용하다고 한다. forwardRef개념부모 컴포넌트로부터 전달된 @ref@를 자식 컴포넌트가 받을 수 있게 해준다.@forwardRef@를 사용하지 않고 자식 컴포넌트에 @ref@를 전달할 수 없다.@ref@는 DOM 요소에만 붙일 수 있다.하지만 @forwardRef@를 사용하면, 부모 컴포넌트가 ..

부모 컴포넌트에서 자식 컴포넌트로 요소 넘기는 방법들어가며리액트에서 부모 컴포넌트에서 자식 컴포넌트로 요소를 넘기는 방법을 알아보자. 방법부모 컴포넌트에서 자식 컴포넌트로 넘길 요소의 타입을 지정할 수 있는데, @string@ 형태로 지정해주면 된다.이떄, @prop@ 이름의 첫 글자는 항상 대문자이어야 한다.App.jsx@ButtonsContainer@ @prop@을 @"menu"@로 지정해보았다.return ( handleSelect("components")} > Components handleSelect("jsx")} > JSX ..

실시간으로 특정 요소의 길이값 가져오기들어가며리액트애서 실시간으로 특정 요소의 길이값을 가져오는 방법을 알아보자. 방법우선 @useRef@를 이용하여 실시간으로 길이값을 가져올 요소를 지정해준다.import {useRef} from 'react';// ...const horiRef = useRef(null);// ...return ( {/* ... */} ); 다음과 같이 @useEffect@와 @ResizeObserver@를 이용하여 해당 요소의 사이즈값을 실시간으로 가져올 수 있다.import { useEffect } from 'react';useEffect(() => { const resizeObserver = new ResizeObserver((entries) => ..

마우스 호버 효과를 적용하기 위한 커스텀 훅 만들기 (useHover.js) 들어가며 요소 위에 마우스 커서를 호버 시, 효과가 작동할 수 있도록 커스텀 훅을 만들어보자. 방법 기존의 방법 커스텀 훅을 사용하지 않을 경우, @mouseover@, @mouseout@에 대한 각각의 이벤트 핸들러 함수를 만들어서 마우스 호버 효과를 적용시키고 싶은 대상에 연결해 주는 방식으로 구현할 수 있었다. import React, { useState } from react; const MyComponent = () => { const [isHovered, setIsHovered] = useState(false); const handleMouseOver = () => { setShowPopup(true); }; cons..

Node.js 설치부터 리액트 프로젝트 테스트까지 정리 들어가며 Node.js 설치, NVM 설치, 리액트 프로젝트 생성 및 테스트까지의 과정을 정리해본다. 방법 (1) Node.js 설치 회사 또는 팀에서 사용하고 있는 버전의 Node.js를 설치하도록 한다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org (2) nvm 설치 NVM(Node Version Manager)은 Node.js의 버전을 관리해주는 프로그램이다. @nvm-setup.exe@ 설치 파일을 다운로드 받아 실행한다. Releases · coreybutler/nvm-windows A node.js version mana..

클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components) 들어가며 리액트(React)는 기본적으로 클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components) 2가지 유형의 컴포넌트를 제공한다. 최신 리액트 버전에서는 함수형 컴포넌트와 훅스(Hooks)를 사용하는 것이 권장되며, 상태 관리나 라이프사이클 이벤트 처리를 더 간단하게 할 수 있는 장점이 있다. 그러나 이미 클래스 컴포넌트로 작성된 코드가 많다면, 따로 변경할 필요는 없다. 클래스 컴포넌트와 함수형 컴포넌트에 대해 알아보자. 클래스 컴포넌트(Class Components) ES6의 클래스 문법을 사용하여 생성된다. @class@ 키워드를 사용하여 ..

훅(Hook)들어가며리액트(React)에서 사용되는 기본적인 훅(Hook)들에 대해 알아보자. 훅(Hook)개념함수 컴포넌트에서 상태(State)나 생명주기 기능 등을 사용할 수 있도록 도와주는 기능클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있게 해준다.가장 널리 사용되는 훅으로는 @useState@, @useEffect@, @useContext@ 등이 있다.각각의 훅을 활용하면 함수 컴포넌트에서 상태 관리, 부수 효과 처리, 전역적인 데이터 공유 등을 편리하게 할 수 있다.이 외에도 많은 다양한 훅이 있으며, 직접 커스텀 훅을 만들어 사용할 수도 있다.훅을 사용하면 함수 컴포넌트에서 상태를 관리하고, 생명주기 메서드를 이용할 수 있어 훨씬 간결하고 유연한 코드를 작성할 수 있게 된다. 종류..

React Developer Tools 들어가며 React Developer Tools 확장 프로그램에 대해 알아보자. React Developer Tools 개념 React 애플리케이션을 개발할 때 도움이 되는 크롬 브라우저 확장 프로그램 이 도구를 사용하면 React 앱의 컴포넌트 구조, 상태, 속성 등을 더 쉽게 이해하고 디버깅할 수 있다. 설치 React Developer Tools를 설치하면 크롬 브라우저의 "개발자 도구" 섹션에서 React 탭이 추가된다. React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 993c4d003 on 12/5/2023. chrome.g..

리액트(React.js) 개발 환경 구축하기 (Windows) 들어가며 윈도우(Windows)에서 리액트(React.js) 개발 환경을 구축해보자. 방법 ① Node.js 설치하기 Node.js 프로그램을 컴퓨터에 설치해준다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ② 비주얼 스튜디오 코드(VS Code) 설치 및 확장 프로그램 설치 비주얼 스튜디오 코드(VS Code)를 설치하고, VS Code에 아래의 확장 프로그램을 설치한다. Babel JavaScript vscode-icons JS JSX Snippets ③ 리액트 앱 생성하기 @my-app@ 이라는 프로젝트를 생성하려면 ..

리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 사용하는 이유? 들어가며 리액트(React)에서 HTML 요소의 클래스를 지정할 때 @class@가 아닌 @className@을 지정하는 이유를 알아보자. 이유 리액트(React)에서 HTML 요소의 클래스를 지정할 때, 다음과 같이 @class@가 아닌 @className@을 지정한다. 그 이유는 자바스크립트(JavaScript)와의 충돌을 피하기 위해서이다. 리액트는 자바스크립트와 JSX를 사용하여 UI를 작성한다. JSX는 자바스크립트의 확장 문법이다. JSX는 HTML과 유사하게 보이지만, 자바스크립트의 일부이다. 자바스크립트에는 @class@라는 키워드(Keyword)가 있기 때문에 리액트에서 HTM..