FrontEnd
-
동일한 패턴이 여러 컴포넌트에서 쓰이고 있다면? - React 고차 컴포넌트로 해결하기!FrontEnd/React 2023. 1. 1. 23:05
고차 컴포넌트란? "고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다."라고 공식 홈페이지에서 정의하고 있다. 규모가 큰 애플리케이션에서 DataSouce에 접근하여 SetState를 호출하는 동일한 패턴이 반복적으로 발생할 때 유용하다. class CommentList extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { // "DataSource" 는 글로벌 데이터 소스입니다. comments: DataSource.getComments() }; } componentDidMount() { // 변화감지를 위해 리스너를..
-
로딩중입니다...는 React로 어떻게 사용할까?FrontEnd/React 2022. 12. 27. 22:20
우리는 흔히 웹앱이나 앱을 사용하다 보면 로딩중..이라고 하면서 로딩 스피너가 뱅글뱅글 도는 화면을 자주 볼 수 있다. 이건 어떻게 쓸까? 바로 React.lazy()이다!! 리액트 홈페이지에 나온설명은 아래와 같다. React.lazy함수를 사용하면 동적으로 import를 사용해서 컴포넌트를 렌더링 할 수 있다. 쉽게 말하면 lazy에 담긴 컴포넌트를 느리게 render할 수 있다는 말이다. 리액트는 처음 렌덜이 될 때 번들을 자동으로 불러오기 때문에 로드되길 기다리는 동안 우리는 사용자에게 로딩화면과 같은 예비 컨텐츠를 보여줄 수 있는 장점이 있다. 사용법은 아래와 같다. import React, { Suspense } from 'react'; const OtherComponent = React.la..
-
TypeScript - 타입에 대한 정의FrontEnd/TypeScript 2022. 10. 21. 02:07
TypeScipr(이하 TS)에서 여러 가지 Type이 존재한다. 이는 JavaScript와도 동일하기 때문에 차근차근 알아보자. Type number : 숫자를 나타낸다. string : 문자를 나타낸다. undefined : 존재하지 않음을 나타낸다. / 메모리도 할당되지 않는다. null : 없는 '값'이다. / 메모리는 할당된다. unknown : 타입을 모른다는 뜻을 가리킨다. any : 어떤 타입이든 가능하다. void : 아무 것도 리턴하지 않는다. / 생략가능 never : 아무 것도 리턴할 수 없다. object : 원시타입을 제외한 모든 타입을 담을 수 있다. Type 응용 1. Type Aliase라고 하는 이것은 type을 내가 정의할 수 있다. 가령 볼펜이라는 type을 내가 정의..
-
TypeScript 시작하기!FrontEnd/TypeScript 2022. 10. 19. 01:59
Typescipt란? JS를 어느정도 숙련된 상태에서 접해야할 언어가 바로 Typescript이다. JS는 동적으로 타입이 결정되는 언어이고, 이와 반대로 TS는 개발당시에 타입을 결정하는 언어이다. 이 둘의 가장 큰 차이점이라고 할 수 있으며, TS를 배워야하는 가장 큰 이유이다. JS는 타입이 dynamic하기때문에 배포가 완료된 후 사용자가 사용하는 시점에서 Type으로 인한 예상치 못한 버그를 마주할 확률이 크다. 작성하기 쉬운 난이도에 반비례하여 버그가 발생할 확률이 높다는 뜻이다. 이런 문제를 해결하기 위해 나온 언어가 바로 TypeScript이며 정적타입 언어이다. JS보다 가독성이 좋고 생산성도 높다. 그리고 보다 안전하다고 할 수 있다. TS로 코드를 작성하면 컴파일러를 통해 JS로 변환..