Dean83

다양하게 사용할 수 있겠지만, 기본적인 구조만 생각해 보면 MVC 패턴에 대입을 해볼 수 있을듯 하다.  구조를 정하지 않거나 모르면, 구성요소를 다 알고 있어도 어디에 어떤 항목을 사용해야 할지 몰라, 프로젝트 시작 단계 부터 난감 할 수 있다. View 대응각 화면 혹은 각 화면에 속한 모듈별로 소스코드를 나눠 구성한다. 두 군데 이상에서 사용되는 UI 요소는 모듈로 나누어 재사용 하는게 좋다.View에 해당하므로 css 파일과 연계가 필요하다. css 도 View 소스파일과 1:1 매칭이 되면 어떨까?  Model 대응커스텀 hook 을 생성하여 마치 클래스를 정의하듯 각 항목별로 클래스 정의간단한 처리 함수들을 포함 할 수 있음. Control 대응컨트롤 클래스를 두고, 비즈니스 로직에 따라, ..

함수 혹은 변수를 메모리에 상주 시키고 싶을때 사용하는 훅 으로, 시간이 오래 걸리는 항목을 메모리에 올려 속도 향상 이유로 쓰기도 한다.(빈번하게 호출되거나 할 경우) 혹은 const 처럼 한번만 계산되나, 결과값을 계속하여 사용할 경우 사용되기도 한다. 둘다 같은 소스코드 내에서 활용하기 위해 주로 사용된다.  인자값1번째 인자값은 콜백함수2번째 인자값은 useState 와 마찬가지로 배열을 받음. 빈배열 : 처음 1번만 호출되어 콜백함수를 호출하고 그 후론 계산된 값을 메모리에서 가져와 사용배열에 변수가 있을경우 : 해당 변수값이 변경될 때 마다 콜백함수 호출useMemo값 만 메모리에 담아둔다. 1번째 인자값으로 함수를 두더라도, 함수 결과값을 메모리에 담아 둔다import { useMemo } ..

예를들어 함수1에서 함수 5까지 동일한 변수를 넘겨줘야 한다고 할때, props 를 이용하여 매번 인자값을 pass 하여 넘겨주는게 번거롭다. 또한 경우에 따라 전역변수 처럼 사용해야 할 때가 있다. 이를 위해 사용하는것이 useContext 훅 이다.  DI 와도 흡사해 보인다.  여러 컴포넌트에서 동시에 접근하여 사용하는 경우 (예 : 로그인 정보) 사용하면 좋다.  //정의import React from "react";export const testContext = React.createContext({ value1 : "test", value2 : 100, ....});//사용import { useContext } from "react";import {testContext } from .....

모든 타입 명시를 해야한다. 함수 작성시 유의점함수 작성시 인자값을 받아야 한다면, interface 로 정의 후 해당 interface를 타입으로 받아야 한다.기존방식인 export function 함수명 () {} 을 사용 할 수도 있다export const 함수명 : React.FC = (변수이름) => {} 을 사용하길 권장한다. interface TestVal{ n1 : string}//이렇게 쓰는것을 권장export const TestFC : React.FC = (n1) => { return ( {n1.n1} )}//이렇게 쓸 수도 있다export function TestFC(n1 : TestVal){ return ( {n..

typescript 는 타입이 굉장히 중요하기 때문에, 기존 javascript 형식으로 export 함수를 생성하면 안된다. import 할 태그는 반드시 대문자로 시작해야 하므로 함수명 작성시 유의할것 함수 작성 예시import React from 'react'export const TestFC : React.FC = () => { return ( test )}인자값이 없는 함수 import는 기존과 동일하다.인자값이 있는 함수 작성interface 로 props 에 해당하는 항목들을 생성해줘야 한다. 단순 string 하나라도 이렇게 작업해야 한다.함수에선 해당 interface 를 type로 하여 인자값을 받아야 한다.interface TestVal{ n1 : st..

일전에 React 초기 세팅에 적긴 했지만 메인으로 따로 빼 둔다.  React App 생성 (Create-React-App) 명령어npx create-react-app 앱명칭 --template typescripttsconfig 수정target 항목을 es6로 변경lib 에 es6 추가app.tsx 코드 변경......function App() {.. 이 부분을 typescript 형태로 변경const App: React.FC = () => {React.FC : React Function Component 로서, typescript 에서 사용할 type 를 정의해 둔것.

CRA는 일전에 한번 다룬것 처럼 Create-React-App 으로서 리엑트 프로젝트 생성시 기본 설정을 자동으로 로드해준다. Craco는 CRA+Configuration Override 로서, 웹팩설정 등 advanced 하게 config를 수정해야 할 경우 유용한 툴이다. 설치npm install @craco/craco --savepackage.json 수정실행 빌드 등을 모두 craco로 바꿔야 한다."scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" }craco.config.js 생성root 에 해당 파일을 생성하고, 설정을 override 할..

global 한 state 관리를 사용하기 위해 쓰는 라이브러리로, state가 local 에서 처리되는것과 다르게, 1개의 state를 여러 element 에서 변경 및 사용 할 수 있다. 전역변수 느낌. 설치를 위해 npm install recoil Recoil을 쓰고자 하는 elements 들은 태그 아래에 존재해야 한다.사용법을 요약하자면, Atom 생성필요시 selector 을 통해 추가 생성element 에서 atom import 및 recoil hook import -> atom 변수에 접근하여 코드 구현main element 에서 recoilroot import 후 태그 안에 위의 element 태그들 작성 Atom쉽게 말해 변수역할업데이트와 구독이 가능하며 이 값이 변화하면 구독중인 ..

보통은 url 호출시 querystring 을 이용하여 파라메터 값을 전달하게 된다. 이를 처리 하기 위해선 useLocation 과 useSearchParams Hook을 추가로 사용해야 한다.   호출하는 쪽은 크게 바뀌는게 없으나, Route는 변경해야 한다. /:item... 이부분을 지워야 한다import {useParams, useNavigate, Route, Routes, BrowserRouter} from 'react-router-dom';.....const navigate = useNavigate();...//} /> 에서 /:item.. 이부분을 지워야 한다} />... navigate('위치?item=문자열&item1=문자열')}>Click //혹은 Link 태그를 사용해도 된다 i..

기존 HTML DOM 에서 a 태그의 href 로 이동하던 것을 리엑트에선 Link 태그를 통해 이동한다.  import {Link} from 'react-route-dom';....클릭.... 파라메터 전달 예import {Link} from 'react-route-dom';....클릭....