Web/ReactJS (6) 썸네일형 리스트형 React, 절대 경로 설정 (Vite 기준) TypeScript 기준으로 쓰였습니다.1. tsconfig.json Setting혹은 tsconfig.app.json 파일에 설정 baseURL 및 path 설정src 혹은 자신이 원하는 임의의 디렉토리 위치를 설정하면 됩니다. "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] }, }2. vite.config.ts Settingtsconfig.json 뿐만 아니라 번들러 모듈 설정도 필요합니다.만약 WebPack으로 설치하셨다면 webpack.config로 작성하시면 됩니다. (1) vite-tsconfig-paths모듈 설치npm install vite-tsconfig-pathsimport { define.. React, 절대 경로 import 리액트를 사용하다보면 만들어 놓은 컴포넌트를 import 할 때default 값이 상대경로이기 때문에 다음과 같은 경우를 마주하게 됩니다,,import { Button } from '../../components'; 디렉토리 구조가 복잡해질 경우 경로를 일일이 계산하는게 번거롭기 때문에절대경로로 사용하는 편이 간단할 때도 있습니다. 절대경로로 설정하는 방법은 의외로 간단합니다. 1. JavaScript1. 프로젝트 루트 디렉토리에 jsconfig.json 파일 하나를 먼저 만듭니다 (보통 만들어져 있다).{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"]}2. 생성한 json파일 안에 compilerOptions key 값에 "base.. ReactJS, Reducer useReducer – ReactThe library for web and native user interfacesreact.dev프로토 타입 및 사용법은 위 북마크 참조! Reducer를 언제 왜 사용하는지 알아봅시다. Reducer는 하나의 State에 관련해서 다양한 로직이 있는 경우에 사용합니다. 다음과 같이 To Do 객체에 관 State가 있다고 가정해봅시다. 하나의 State에 Set하는 Event Handler 함수들이 늘어남에 따라 복잡한 로직들이 우후죽순 늘어나게 됩니다. State를 설정할 수 있는 로직들이 쌓이다보면 어디서 state값이 변했는지 알기 어려운 경우가 생기기 마련입니다. 함수 하나를 통해 미리 지정한 인자대로 입력을 받고 State값을 변환하는 것이 Reducer 입니.. React, Component란 Component란 어플리케이션의 재사용 가능한 UI들의 결합체.1. Export Componentexport default function Profile() { return ( )}2. Definite Componentfunction Profile() { return ( )}💡 React 컴포넌트는 일반 JavaScript 함수이지만, 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않습니다! 3. 한 파일에서 여러 컴포넌트를 import 하거나 export 하는 방법하나의 파일에 두 개의 default export를 정의할 수 없습니다.이런 경우 새로운 파일 하나를 더 생성해서 default export를 사용하거나named export를 사용하여 한 파일에서 여러 컴포넌.. React, JSX 문법 JSX는 JavaScript를 확장한 문법입니다. JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다Web이 더욱 interactive해지면서, 로직이 내용(HTML)을 결정하는 경우가 많아졌습니다. 이것이 바로 React에서 렌더링 로직과 마크업이 같은 위치에 함께 있게 된 이유입니다. 💡 JSX와 React는 서로 다른 별개의 개념입니다. 종종 함께 사용되기도 하지만 독립적으로사용할 수도 있습니다. JSX는 확장된 문법이고, React는 JavaScript 라이브러리입니다. Introducing the New JSX Transform – React BlogThis blog site has been archived. Go to react.dev/blog to see t.. ReactJS, Redux 개념 및 동작원리 What is Redux Redux는 Actions이라 불리는 이벤트를 통해 상태관리 라이브러리이자 패턴이다. Redux는 중앙집권화된 store를 통해 어플리케이션 전역상태를 관리하는 방식이다. Why Should I Use Redux?일반적으로 컴포넌트에서 props를 통해 데이터를 자식 컴포넌트에게 넘겨주는데자식의 자식의 자식의 자식의 자식의 자식의 자식...이런 과정이 백 번 반복되어서 데이터를 전달해줘야한다면,,? 전역 변수처럼 사용할 수 있는 데이터들이 있다면 이러한 문제가 쉽게 해결되지 않을까라는 것에서 기인한 것입니다. Redux FlowRedux Store Redux Store는 내 어플리케이션의 전역 상태를 가지고 있는 유일한 컨테이너입니다. Store는 하나의 오브젝트와 몇가지 기능을.. 이전 1 다음
