👨💻 Dev15 [TypeScript] 함수 - 다형성과 제네릭 들어가며 이번 포스팅은 타입스크립트 함수 파트를 정리한다. polymorphism(다형성)과 generic(제레닉)의 개념을 예시 code로 살펴보자. Polymorphism (다형성) poly란? => many, serveral, much, multi morphos란? => form, structure polymorphos란? => poly + morphos => 여러 다른 구조 다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미한다. 💡 Concrete type (string, number, boolean... ) type SuperPrint = { (arr: number[]): void (arr: boolean[]): void (arr: string[]): void (arr: (n.. 2022. 12. 19. [TypeScript] 함수 - Call signature와 Overloading 들어가며 이번 포스팅은 타입스크립트 함수 파트를 정리한다. Call signature과 overloading의 개념을 예시 code로 살펴보자. Call signatures(호출 시그니처) Call(=Function) Signature란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다. 함수에 마우스를 올리면 해당 함수의 type을 보여준다. 예를 들어 React에서 함수로 props를 보낼 때, Call signature로 어떻게 함수가 작동할지 미리 설계 가능하다. 함수의 구현이 아니라 함수의 인수 및 반환 값의 유형 JS로 컴파일되지 않음 여러 함수에 call signature 사용 가능 💡 함수 정의 const add = (a: number, b: number) => a.. 2022. 12. 18. [React] useCallback으로 useEffect 심화 활용 ✔ 들어가며 useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 훅이다. 리액트의 useCallback를 useEffect와 함께 사용하여 여러방면으로 효율적인 코드를 구성할 수 있는 방법을 배워서 포스팅으로 정리해본다. useCallback은 useEffect와 생긴 것은 똑같지만, 역할은 조금 다르다. ✔ 예제로 보는 useEffect 심화 활용 const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); 첫 번째 인자로 콜백함수를 넣어주고 호출해주고 있고, 두 번째로 의존성 배열을 넣어주고 있다. a나 b가 바뀌었을 때만 useCallback의 콜백 함수를 새로 생성하고, 그렇지 않을 경.. 2022. 12. 15. [React] useEffect hook 쉽게 알아보기 ✔ 들어가며 useEffect, 직역하면 효과를 이용한다. 그럼 무슨 효과냐면? state 바뀌면서 생기는 "side effect", 부가적인 효과들을 useEffect 훅 안에서 수행할 수 있게 해준다. (Side effect: component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과) ✔ 예제로 알아보는 useEffect 💡 exam count가 업데이트될 때 document.title에 count를 업데이트해줘! 하는 코드다. import React, { usestate, useEffect } from "react"; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.titl.. 2022. 12. 15. [TypeScript] 타입스크립트 첫걸음 들어가며 자바스크립트는 에러를 보여주지 않으려 노력한다. 자바스크립트는 매우 유연한 언어로 어느 개발자가 정신 나간 코드를 작성해도 개발자를 이해하려고 한다. 아래의 예시를 살펴보자. 💡 exam Python & JS # Python def divide(a, b): return a / b print(divide(2, 3)) # 0.6666666666666666 print(divide("x", "y")) # TypeError: divide() missing 1 required positional argument: 'b' // JavaScript function divide(a, b) { return a / b } console.log(divide(2, 3)); // 0.6666666666666666 con.. 2022. 12. 11. [React] key가 필요한 이유와 주의할 점 들어가며 React에서 map으로 컴포넌트를 반복 렌더 할 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있는데, 여기서 key는 무엇이며 왜 필요한지에 대해 알아본다. " Warning: Each child in a list should have a unique "key" prop " 자식에 대한 재귀적 처리 DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. 💡 exam Duke Villanova // 변경 Connecticut // 자식요소 추가 Duke Villanova 위와 같은 경우 React는 Duk.. 2022. 12. 10. 이전 1 2 3 다음
