하다보니

npx create-next-app@latest --typescript library는 개발자로서 내가 사용하는 것이다. library를 불러와서 library를 사용해서 무언가를 한다. 그런데 framework는 내 코드를 불러오는 것이다. framework는 코드를 적절한 위치에 잘 적기만 한다면 너의 코드를 불러와서 모든 걸 동작하게 할 것이다. library를 사용할때는 내가 원하는대로 코드를 작성할 수 있고, 사용하고 싶을 때 사용할 수 있다. 리액트 같은 경우는 내가 원하는대로 routing을 다룰 수 있고, 파일명을 정할 수도 있다. 라이브러리는 내가 원할 때 언제든 어떤방법으로든 부르면 된다. 프레임워크에선 특정한 규칙을 따라서 특정한 것을 해야 한다. 우리가 그것들을 따랐을 때 모든 게 ..

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

컴포넌트 최적화를 위해 사용하는 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()); // 그러면 이렇게 아래처럼 콜백함수를 인자로 줘야한다..