분류 전체보기235 [React] 리액트 훅 - useReducer(관리 코드 컴포넌트 외부 분리) 📌 useReducer 훅React에서 제공하는 훅 중 useReducer라는 상태 관리 훅이 있다.useState와 마찬가지로 상태를 관리하지만,컴포넌트로부터 로직을 분리하기 때문에 관리해야하는 상태나 로직이 복잡한 상황에서useState보다 컴포넌트를 좀 더 깔끔히 관리할 수 있다는 장점이 있다. 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을그 컴포넌트로부터 분리시키는 것을 가능하게 해준다는 것이다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가능하게 함으로써, 코드의 최적화를 이루게 해준다.State 업데이트 로직을 또다른 파일에 작성해서(분리), 분리된 파일을 불러와서 사용하는 것도 가능🔎 useReducer를 사용한 경우컴포넌트.. 2024. 8. 28. [React] 리액트 이벤트 처리 - 핸들러, 컴포넌트 상태(useState), 단방향 바인딩 📌 이벤트 핸들링 / 이벤트 핸들러이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업이벤트 핸들러 : 이벤트를 처리하는 함수 (onClick, onSubmit 등과 같은 이벤트 프로퍼티에 함수 형태로 전달)📌 이벤트 핸들러 (단방향 데이터 흐름)컴포넌트에서 특정 DOM 요소에 이벤트가 동작하도록 하려면, 해당 DOM 요소에 이벤트 핸들러를 설정해야 합니다. HTML 엘리먼트의 이벤트는 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다.예를 들어, 클릭 이벤트는 onClick으로 설정합니다. 리액트에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐릅니다. 이벤트 핸들러도 동일한 원칙에 따라 작동하며, 부모 컴포넌트는 자식 컴포넌트에 이벤트 핸들러 함수를 전달하.. 2024. 8. 26. [JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce() 리스트 컴프리헨션(List Comprehension)배열이나 리스트를 간결하게 생성하는 문법을 의미합니다.리스트 컴프리헨션은 리스트를 짧고 직관적인 방식으로 생성하거나 변형할 수 있는 문법입니다.메서드설명map()배열의 각 요소를 변형하여 새로운 배열 생성(원본배열 유지)filter()조건에 맞는 요소만을 포함하는 새로운 배열 생성(원본배열 유지)find()배열에서 조건을 만족하는 첫 번째 요소의 값을 반환조건에 맞는 요소가 없다면 undefined를 반환(원본배열 유지)from()유사 배열 객체나 반복 가능한 객체를 배열로 변환(원본배열 유지)fill()배열의 모든 요소를 특정 값으로 채우기시작과 끝 인덱스를 지정하여 배열의 일부만 채운다.(원본배열 변경)reduce()배열의 요소를 누적하여 단일 값을.. 2024. 8. 22. [JavaScript] 자바스크립트 ...Spread 연산자(Spread Operator) - 배열, 객체, 함수, rest 파라미터 스프레드 연산자 (. . .)세개의 점(. . .)으로 이루어진 연산자는기존 배열객체의 값을 그대로 복사해와서 사용할 수 있는 연산자라고 할 수 있다.객체는 이런 spread 연산자를 많이쓰고 배열은 원본을 건드리지 않고 사본을 만들어주는 내장함수 (map, filter, reduce, concat) 을 통해 다양한 처리를 할수 있다. 배열 복제 · 병합 · 변경 · 추가객체 복제 · 병합 · 변경 · 추가 함수 매개인자rest 파라미터 - 함수rest 파라미터 - 객체 · 배열let array = [1,2,3,4,5];/* ... ➡️ 스프레드 문법(점 3개) 배열 안에 있는 항목들(요소들)을 전부 꺼내준다. 즉 [...array]은 array에 있는 항목을 전부 꺼내 .. 2024. 8. 21. [React] 리액트 내장 컴포넌트(Fragment, Profiler, StrictMode, Suspense, lazy) 내장 컴포넌트리액트는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공합니다.내장 컴포넌트설명..., 또는 ... 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.여러 JSX 노드를 하나의 그룹으로 묶고 싶을 때 사용하는 컴포넌트리액트 컴포넌트가 얼마나 빠르게 렌더링되는지를 측정하고, 성능을 분석할 수 있게 도와주는 컴포넌트개발 중에 잠재적인 문제를더 빨리 찾아내고 해결할 수 있도록 돕는 컴포넌트React.lazy()자식 컴포넌트를 로딩하는 동안 fallback을 표시할 수 있습니다.자식 컴포넌트를 비동기적으로 로딩할 때, 로딩이 완료되기 전까지 보여줄 화면을 지정 내장 컴포넌트 사용방법 (import)리액트에서 기본 태그나 내장 컴포넌트들을 사용하기 위해서는 import를 통해 해당.. 2024. 8. 21. [Adobe XD] 어도비XD 플로우 차트 - 순서도 템플릿 🗂️ 첨부 파일플로우차트(Flowchart)는 순서도, 흐름도라고도 한다.순서도는 어떠한 일을 처리하는 과정을 순서대로 간단한 기호와 도형으로 도식화한 것을 의미📌 각 기호별 의미 📌 플로우 차트 종류유저 플로우 차트 / 태스크 플로우 차트 / 시스템 플로우 차트 / IA ✅ 유저 플로우 차트유저 플로우 차트란 유저 행동 흐름을 도식화하여 표현한 것입니다. 단일 유저의 행동 여정을 표현하기도 하지만 서로 다른 유저가 서로 다른 태스크를 수행할 때도 표현이 가능합니다.✅ 태스크 플로우 차트주요 태스크의 프로세스를 표현합니다. 복잡한 플로우를 설계하기 전 단일 플로우 차트로 뼈대를 설계합니다.✅ 시스템 플로우 차트흐름에 따라 데이터를 어떻게 처리하는지 확인할 수 있는 플로우 차트입니다.자료의 입출력 흐.. 2024. 8. 18. [Adobe XD] 어도비XD URL 공유 플로우 삭제 방법 🎯 Goal어도비XD에서 제공하는 '플로우 기능'은 디자인 소스와 프로토타입을 URL으로 공유 기능어도비XD 플로우 삭제💊 해결 방법프로토타입 탭 ▶ 해당 아트보드 상단 좌측 파란버튼 클릭프로토타입 탭 ➡️ 아트보드 상단 좌측에 이렇게 파란버튼이 보이는데 이걸 클릭하면➡️ 플로우가 제거되고 저장해주면 끝! 2024. 8. 18. [React] 리액트 사용자 정의 함수형 컴포넌트(Functional Component) - 클래스와 객체 인스턴스를 사용해 데이터 관리 🏷️ 요약이 애플리케이션은 리액트를 사용하여 책 정보를 화면에 표시하는 기능을 구현하고 있습니다.각 컴포넌트는 리액트의 함수형 컴포넌트로 정의되어 있으며,책 객체는 클래스를 사용해 생성되었습니다. 'App' 컴포넌트는 책 목록을 관리하고 'Library' 컴포넌트에 전달합니다.'Library' 컴포넌트는 책 목록을 반복하여 'BookShow' 컴포넌트를 통해 표시합니다.'BookShow' 컴포넌트는 개별 책의 정보를 화면에 렌더링합니다.🧱 사용자 정의 - 함수형 컴포넌트App, Library, BookShow는 모두 리액트의 함수형 컴포넌트입니다.이 컴포넌트들은 UI를 구성하는 역할을 합니다. ✴️ 클래스와 new 키워드 사용Book 클래스는 책의 데이터 정보를 정의하고, new 키워드를 사용해 책 .. 2024. 8. 18. [React] React Vite TypeScript 개발환경 세팅하기 (Vite 설정 파일 - root: "./" 변경) 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/214 [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기"📁components" 폴더 (main.tsx)"📜index.html" 파일"📜vite.config.ts" 파일"📜tsconfig.json" 파.. 2024. 8. 17. 이전 1 2 3 4 5 6 ··· 27 다음 728x90 반응형
