하다보니

TypeScript로 객체 지향 프로그래밍 해보기 class Player{ constructor( //아래의 private이 js에선 보이지 않는다. private firstName:string, private lasetName:string, public nickname:string ){} } const nico=new Player("nico","las","니꼬") //firstName은 private이라 접근 불가 nico.firstName 추상 메소드란 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를 말한다. 그러므로 추상 메소드는 구현부가 없고 선언부만이 존재한다. 추상 클래스는 추상 메소드를 하나 이상 포함한 클래스이며, 정의되지 않은 추상 메소드를 포함..

타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 왜 타입스크립트를 써야하나? - 에러 사전 방지를 위해. 아래와 같이 작성하면 sum('10','20')과 같이 의도하지 않은 값의 동작을 예방할 수 있다. // math.ts function sum(a: number, b: number) { return a + b; } - 코드 자동 완성과 가이드 VS code의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어있다. 따라서 VS code에서해당 타입에 대한 apif르 미리보기로 띄워줄 있어 빠르게 자동 완성이 가능하다. 타입스크립트 장점 타입이 있다는 것이 장점이다. 타입 안정성이 가장 큰 장점이다. 안정성-컴파일 단계에서 미리 오류를 감지할 수 있다. 가독성-타입을 보고 이 로직..

함수에 배열을 전달할 때 배열을 구성하는 요소들이 모두 복사되어 전달되는 것이 아니라 배열의 값들을 가리키는 주소만 전달된다는 것을 알 수 있다. 함수 내에서 전달받은 배열에 새로운 값을 추가하면 함수 밖의 원래 배열에도 추가가 된다. 함수 내에서 새로운 배열을 할당하면 다른 배열을 가리키게 되면서 변수가 가리키는 주소가 달라져서 함수 내에서 아무리 변경해도 함수 밖의 원래 배열에 영향을 끼치지 못한다. 함수 인수 전달 방식 Call by Value 함수에 인수를 전달하는 방식. 변수의 값을 복사해 함수의 인자로 전달한다. 따라서 함수 내에서 전달된 인자를 조작해도 함수 외부의 변수에는 영향을 미치지 않는다. Call by Reference 함수에 인수를 전달하는 방식 포인터로 함수의 인자에 전달하는 방..

useCallback 또한 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜준다. 메모이제이션은 자주 사용되는 값을 받아오기 위해 반복적으로 계산을 해야한다면 이전에 계산한 값을 캐싱해둠으로 해당 값이 필요할 때마다 반복적으로 계산하는 것이 아니라 메모리에서 꺼내서 재사용하는 최적화 기법이다. useMemo의 인자로 콜백함수를 넣어주면 이 함수가 리턴하는 값을 메모이제이션 해주는 것이다. useCallback은 인자로 전달한 콜백함수 자체를 메모이제이션 해준다. 이 함수가 필요할 때마다 메모리에서 가져와서 재사용한다. JS에서 함수는 객체의 한 종류이다. calculate라는 변수에 객체가 할당되는 것이다. 리액트에서 함수형 컴포넌트는 함수이다. 그래서 렌더링된다는 것은 component 함수가 호출된다..

TypeScript 공식 문서를 보던 중 if (1 < x < 3) { // *어떤* x 값이던 참입니다! } 라는 코드를 보게 되었다. 해당 예시는 JavaScript 의 동일 연산자는 (==) 인수를 강제로 변환하여(coerces), 예기치 않은 동작을 유발한다라는 설명의 예시였다. 나는 왜 1

컴포넌트 최적화를 위해 사용하는 hook - useMemo, useCallback memo는 memoization을 뜻한다. 동일한 값을 리턴하는 함수를 반복적으로 호출해야 한다면 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용하는 기법. 자주 필요한 값을 맨처음 계산시 캐싱을 해줘서 필요할때마다 캐시에서 꺼내서 사용한다. 함수형 컴포넌트는 말그대로 함수이고, 렌더링된다는 것은 함수가 호출된다는 뜻이다. 이것은 모든 내부 변수가 초기화된다는 말이다. useMemo를 사용해서 메모이제이션을 해주면 불편함 개선 가능. 첫번째 인자는 콜백함수. 메모이제이션 해줄 값을 계산해서 리턴해준다. 이 콜백함수가 리턴하는 값이 useMemo가 리턴하는 값이다. 두번째 인자 배열은 의존성 배열. 해당 배열 요..

props를 사용해서 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달. 전역적인 데이터를 단계적으로 전달하려면 고통이다. 리액트가 제공하는 context API로 해결 가능. useContext는 context로 공유한 데이터를 쉽게 받아오는 역할을 한다. context는 꼭 필요할 때만 사용하는 게 좋다. context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다. context의 주된 목적은 다양한 레벨에 있는 많은 컴포넌트들에게 전역적인 데이터를 전달하기 위함이다. 데이터를 제공해 줄 provider와 데이터를 받을 consumer가 있다. context api를 무분별하게 사용하면 성능 이슈가 발생할 수 있다. 그 이유는 provider가 변경되면 consumer와 관련된 컴포넌트들이 전부 다..

함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환해준다. const ref=useRef(value) ref는 {current:value} 형태이다. 우리가 초기값으로 넣어준 value는 ref의 current에 저장이 된다. ref 오브젝트는 언제든 수정이 가능하다. 반환된 fref는 컴포넌트의 전 생애 주기를 통해 유지가 된다. 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 unmount 되기 전까지는 값을 유지할 수 있다. useRef의 사용 1. 저장공간 state의 변화->렌더링->컴포넌트 내부 변수들 초기화 따라서 원하지 않은 렌더링으로 곤란해질 수 있다. Ref의 변화-> no 렌더링-> 변수들의 값이 유지됨 불필요한 렌더링 막을 수 있음 state변화->렌더링->그래도 Ref의..

리액트 훅 중에서 가장 중요한 useEffect useEffect 함수는 인자로 콜백함수를 받는다. 콜백함수란 다른 함수의 인자로 전달된 함수를 의미한다. useEffect(()=>{}) 1번 형태는 컴포넌트가 렌더링 될 때마다 실행된다. 2번은 화면에 첫 렌더링 될때, value값이 바뀔 때 실행된다. useEffect(()=>{},[]) 빈 배열이면 컴포넌트가 화면에 첫 렌더링될 때 실행된다. Clean Up-정리 작업이 필요하다. useEffect import React, { useState, useEffect } from "react"; function App() { const [count, setCount] = useState(1); const [name, setName] = useState("..

useState state는 상태. useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 해줄 수 있는 도구. state를 setState로 변경해준다. setState로 상태를 변경하면 해당 컴포넌트는 화면에 다시 렌더링이 된다. import { useState } from "react"; const heavyWork = () => { console.log("무지하게 무거운 함수"); return ["홍길동", "김민수"]; }; function App() { // 초기값이 이렇게 무거운 작업을 하는 함수라면 맨 처음 렌더링 시에만 불러주고 싶다. // const [names, setNames] = useState(heavyWork()); // 그러면 이렇게 아래처럼 콜백함수를 인자로 줘야한다..