행복한 세상

TypeScript 3

[코드 걸음마] 비교 연산자, 하나의 state로 관리할것

1. 논리 연산자를 잘 사용하여 코드량을 줄이자 /* BEFORE 두개의 함수를 사용하다보니 코드양이 길어진다 */ const handleClickOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; /* AFTER 논리 연산자를 사용하여 하나의 함수로 처리하였고 코드양도 줄어들었다 */ const toggle = () => { setOpen(!open); }; !과 같은 논리연산자와 삼항연사자를 통해 if문을 대체하거나 여러개로 쪼개져있는 함수들을 하나로 처리할수 있는 경우가 많다. 2. 하나의 state로 관리할 것 개별적으로 컴포넌트들을 렌더링한다고 컴포넌트마다 state를 지정해주면 코드가 한없이 복잡해 질 ..

개발/클린코드 2022.01.02

[typescript] 데이터 타입

typescript의 간단한 소개 불리언(Booelan) boolean값은 참/거짓(true/false) 값 입니다. let flag:boolean = false; 숫자(Number) javascript처럼 typescript의 모둔 숫자는 부동 소수이다. typescript는 16진수, 10진수 9진수 2진수도 지원합니다. let hex: number = 0xffff; //16진수 let decial: number = 6; //10진수 let octal: number = 0o7652 //8진수 let binary: number =0b1101 //2진수 문자열(String) javascript와 같이 작은 따움표( ' )나 큰 따움표( " ) 로 문자열 데이터를 감싸 표현할 수 있습니다. let text..

개발/Typescript 2022.01.01

[코드 걸음마] 중복선언 type, List Component 렌더링 함수

1. 중복 선언된type은 type alias로 간략하게 사용하자 //before const [images, setImages] = useState(); const [files, setFiles] = useState(); //after type DetailedHtmlType = React.DetailedHTMLProps; const [images, setImages] = useState(); const [files, setFiles] = useState(); type을 선언할때 복잡한 타입을 여러번 선언하게되면 타입 변경시 수정 포인트가 많아지게된다. 선언하는 곳이 몇개 안될때는 그냥 사용해도 좋지만 1얼마나 재사용하게될지 모르니 되도록이면 alias를 사용하여 수정 포인트를 한군데로 몰아주는게 코드관리..

개발/클린코드 2022.01.01