티스토리

부앙단 개발로그
검색하기

블로그 홈

부앙단 개발로그

thring.tistory.com/m

Web Front Developer🐣

구독자
1
방명록 방문하기

주요 글 목록

  • [React] useMemo와 useCallback useMemo와 useCallback은 React의 훅으로, 각각 계산된 값과 함수의 메모이제이션을 도와줍니다.둘 다 성능 최적화에 사용되지만, 그 목적과 사용 방법이 다릅니다. useMemo목적 : 계산된 값을 메모이제이션하여 불필요한 재계산을 방지합니다.사용법 : 계산이 필요한 값을 반환하는 함수를 인자로 받고, 그 값이 변경되지 않는 한 메모이제이션된 값을 반환합니다.const computedValue = useMemo(() => { return expensiveCalculation(someValue);}, [someValue]);여기서 expensiveCalculation은 someValue가 변경될 때만 다시 계산됩니다. useCallback목적 : 함수를 메모이제이션하여 함수가 새로 생성되는.. 공감수 0 댓글수 0 2024. 7. 26.
  • [React] useCallback을 사용하는 이유 useCallbackReact 컴포넌트가 리렌더링되면 해당 컴포넌트 함수들이 새로 만들어집니다.자바스크립트에서는 함수도 곧 객체이기 때문에 리렌더링이 되면 '내용이 동일한 새로운 함수 객체'가 생성됩니다.useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 두번째 매개변수인 deps가 업데이트되지 않는다면 함수 객체를 독립된 메모리에 캐싱해두고, 리렌더링 시 새로운 함수 객체를 생성하지 않기 때문에 해당 함수를 props로 가지는 자식 컴포넌트들은 함수가 바뀌었다고 생각하지 않게 됩니다.따라서, 자식 컴포넌트의 props로 전달해주는 함수들은 useCallback을 사용해주면 재실행이 일어나는 횟수가 줄어들기 때문에 더 효율적인 앱을 만들 수 있습니다.const onCrea.. 공감수 0 댓글수 0 2024. 7. 24.
  • [React] State와 스냅샷 State를 스냅샷으로 보기 리액트의 상태 변수는 그냥 일반적인 자바스크립트 변수처럼 보이지만 상태는 하나의 스냅샷에 더 가깝다. setState 함수를 이용하여 상태를 업데이트하는 것은 현재의 상태를 변경시키지 않고 리렌더링을 일으킨다. 상태 값을 변경하는게 어떻게 리렌더링을 일으키는가? 언제 그리고 어떻게 상태가 업데이트 되는가? 왜 상태는 변경 즉시 업데이트되지 않는가? 이벤트 핸들러가 어떻게 상태의 스냅샷에 접근하는가? State를 설정하면 렌더링을 일으킨다. 사용자가 마우스 클릭 이벤트를 일으키는 즉시 상태가 변경된다고 생각이 들 수도 있다. 하지만 리액트에서는 이런 Mental Model과는 다르게 동작한다. 인터페이스가 이벤트에 반응하려면 state를 업데이트 해야한다. import { us.. 공감수 0 댓글수 1 2024. 2. 13.
  • [React] 자바스크립트 새로고침 let과 constvar : 자바스크립트에서 변수를 생성함절대 변하지 않는 변수 - 상수 let과 const를 사용할 것을 권장!!let : 새로운 var이라고 생각하면 되고, 변수를 선언할 떄 사용let과 const는 모두 변수들의 범위를 변경하는 것들이다. let은 값을 수정할 수 있는 변수를 선언할 때 사용, const는 한번 지정하면 절대 변하지 않는 값인 상수를 선언할 때 사용const에는 새로운 값을 할당할 수 없다. 화살표 함수(Arrow Functions)function myFnc(){...} const myFnc = () => {...}화살표 함수는 키워드 this로 인해 생기는 문제를 해결해줌!this 키워드는 항상 내가 원하는 객체를 참조하지 않는 문제가 있음화살표 함수 안에 this.. 공감수 0 댓글수 0 2023. 2. 14.
  • [React] 왜 React를 쓸까? React자바스크립트 라이브러리, 사용자 인터페이스를 만드는데 사용사용하기 쉽고, 로딩 기다릴 필요 없고, 화면 전환 빠름전통적인 웹사이트약간 무겁고, 불편함링크나 버튼 클릭 시 요청이 서버에 전송되고, html 페이지가 브라우저로 보내져서 화면에 보여줌새로운 html 페이지가 로딩되는 동안 기다려야 함 DOM 조작 : html 요소들이 화면에 렌더링됨JS 조작 : 사용자들이 보는 것 변경 가능(새로운 html 페이지 불러오지 않아도 됨) 왜 자바스크립트에 추가적으로 리액트가 필요할까?JS로 작업 할때는 모든 단계를 일일이 작성해야 함(명령형 접근방식) : 일련의 액션들을 단계별로 설명리액트는 유지보수와 관리가 용이하도록 유지됨최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있게 해줌선언형 방.. 공감수 0 댓글수 0 2023. 2. 7.
  • React 시작하기 개발환경 설정 NVM 다운로드 및 설치 NVM = Node Version Manager 1. NVM 다운로드 접속 2. 최신 버전 nvm-setup.zip 파일 다운로드 3. 설치 진행 nvm version Node.js 설치 최신버전 설치 nvm install latest 특정 버전 설치 nvm install 버전이름 설치 버전 확인 nvm ls node -v // 노드 버전 확인 npm -v // npm 버전 확인 특정 버전 사용 nvm use 버전 Yarn 설치 npm 단점을 보완하여 성능/속도 개선한 것 Yarn 다운로드 접속 설치 버전 확인 yarn -v CRA (Create-React-App) 리액트 프로젝트 시작 시 필요한 개발 환경 세팅 도구 리액트 앱 생성 yarn create react.. 공감수 0 댓글수 0 2022. 11. 14.
  • React 입문 React 란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 Facebook에서 개발한 라이브러리 SPA(Single Page Application) 개발 시 사용 재사용 가능한 UI 구성 요소 생성 오로지 view만 담당 내장 기능이 부족해 third-party 라이브러리(react-router-dom, redux) 등 함께 사용 Vritual DOM을 통해 최적화를 구현 왜 React 일까?? Virtual DOM을 사용하여 최종 변화만 실제 DOM에 전달하기 때문에 빠른 성능 유지 Component 기반 구조로 재사용 및 유지보수 용이 생태계가 넓고 다양한 라이브러리 사용 가능 React Native 활용한 앱 개발 가능 React 특징 단방향 데이터 흐름 Component 기반 구조 V.. 공감수 0 댓글수 0 2022. 11. 14.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.