Dean83

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

장치의 특징을 파악하여 알맞은 css를 적용하기 위해 사용됨. 예를들어 스크린 사이즈, 스크린 orientation 등을 통해 조건에 맞는 css를 반영함. 연산자를 통해 if 문처럼 처리 가능.  연산자and : and와 동일, : or 역할not : ! 역할only : 모든 조건문이 참일 경우만 동작 유형screen : 화면print : 프린트 미리보기all : 모두speech : 마이크 등연산자에 사용되는 속성값width, heightmax-width, min-width 처럼 조합하여 가능orientationlandscapeportraithover 사용 예@media screen and (min-width : 1000px) { html{ display: grid; place..

함수 혹은 변수를 메모리에 상주 시키고 싶을때 사용하는 훅 으로, 시간이 오래 걸리는 항목을 메모리에 올려 속도 향상 이유로 쓰기도 한다.(빈번하게 호출되거나 할 경우) 혹은 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 .....

@mixin 어노테이션은 @include 어노테이션과 한 세트 이다. css 정의를 할때, 다른곳에서 가져다 쓸 수 있게(함수 호출처럼) 해주는 어노테이션 이다. 함수 호출 처럼 사용 할 수 있기 때문에, 키워드, 동적 인자값 전달이 가능하며, @content 로 확장 할 수도 있다.  기본 예 ) @mixin test-style{ color : red; width : 10px;}...test1-style{ @include test-style;} 이런식으로 1개의 스타일을 설정한 후, 여러 스타일에서 호출하여 사용할때 사용한다.   함수 호출과 동일한 방식으로, 인자값을 넘겨 줄 수도 있다. @mixin test-style ($colorValue, $sizeValue){ color = $color..

Omittype 에서 특정 항목을 제거 할 때 사용. 예를들어 type1 이 속성을 10개를 가지고 있고, type2 에서는 그중 몇개를 제거한 7개의 속성이 중복된다고 했을때 손쉽게 사용 가능.export type TypeTest1 ={ val1 : string, val2 : int, ....}//val2 를 제외하고 속성 생성export type TypeTest2 = Omit{ }  이렇게 커스텀 type 생성시 에도 사용할 수도 있지만, interface 에서도 사용할 수 있다. export type TypeTest1 ={ val1 : string, val2 : int, ....}interface TestInterface extends Omit{} Pick모든항목을 지우고 특정..

개발하면서 가장 낮선 부분이라 따로 정리를 해 둔다. ... 뒤에 있는 항목의 요소를 모두 풀어내는 역할을 한다. 풀린요소들을 각각 추가하거나 합칠때 좋다 let list1 = [1,2,3];let list2 = [4,5,6];list1.push(...list2); //list1 은 [1,2,3,4,5,6] 이 된다let obj1 = { val1 : 1, val2 : "a"}let obj2 = { val3 : "bb", val4 : true}let obj3 = {...obj1,...obj2};//obj3 은 {val1: 1, val2 : "a", val3 : "bb", val4 : true} 가 된다

정해진 type 외에 커스텀한 형태로 만들 수 있다. interface, class 와 비슷하게 구성 할 수 있다. export type testtype = { numval : number, ......}/////// 사용처에서import {testtype} from .......const val1 : testtype = { numval : 10, ....}상속interface 나 class 는 extends 를 통해 상속을 할 수 있고, type 같은 경우는 & 기호를 사용한다. export type TypeTest1 ={ val1 : string, ....}export type TypeTest2 = TypeTest1 &{ additional : string, ....}

모든 타입 명시를 해야한다. 함수 작성시 유의점함수 작성시 인자값을 받아야 한다면, 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..