FrontEnd/React (38) 썸네일형 리스트형 React Hooks -useRef에 대하여(2) (*****내가 생각했던 모든 깊은 내용이 모두 공식문서에 있다. 반드시 공식문서를 익숙히 해야 한다. 공식문서가 가장 자세하고 친절한 설명서다*****) 반드시 공식 문서봐라. 중간에 이해하기 힘들면 이해하려 노력하고 그래도 안되면 그냥 두고 새 마음으로 다시 읽어나가. 그게 왕도다. 그게 정석이다. https://react.dev/reference/react/useRef#usage 아래 예시 반드시 익힐것. 복잡하지만 차근차근 짚어가면서 해석해야한다. state인 inputs는 객체이며 두개의 키인 '이름',과 'nickname'을 갖는다(주석1참고). 주목할 것이 onChange함수 안에 있는 주석3에서 e.target하여 value와 name을 구조분해 하여 취하고 있는데 여기서의 value, name은 input태그의 속성인 value와 name이다. 즉 input태그의 value, name의 값으로 input창에 무언가를 입력하면 그것이 속성va.. React Hooks -useRef에 대하여 참고:https://www.youtube.com/watch?v=VxqZrL4FLz8&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=3 https://hihiha2.tistory.com/19#recentComments (영상 잘 정리해 놓은글) 아... 이제 알겠다. useRef()로 반환되는 객체의 이름을 nameFocus라고 했을때 nameFocus를 ref속성의 값으로 취하는 태그가 nameFocus객체의 current키의 값이 되는 것이다. useRef의 구체적인 주요역할 3가지. DOM요소에 직접접근, 효율적인 component랜더링과 변수 관리 useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 .. React Hooks -useState에 대하여 출처: https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO useState function heavyWorkd() { // 뭔가 엄청 무거운 작업 } useState(()=>{}) // 또는 useState(heavyWork) useState(heavyWork())이 아닌, 위의 예시처럼 콜백 형식으로 무거운 작업을 넣어주면 맨처음 렌더링 될 때 한번에만 불린다. 즉 초기값을 가져올 때 무거운 함수를 가져온다면 콜백 형식으로 넣어주기. import { useState } from 'react'; const App=()=>{ const [names, setNames]=useState(['']); const [.. 컴포넌트의 라이프사이클, useEffect 컴포넌트가 랜더링 되면 DOM Tree에 붙는 순간이 있을 것입니다. 그 붙는 순간에 특정작업을 할 수 있게 하는 것이 componentDidMount입니다. componentDidMount는 처음 랜더가 성공적으로 실행되었을 때 실행됩니다. 그 후 setState같은 것으로 rerendering이 일어날때는 componentDidMount는 실행되지 않습니다 구체적으로 언제 componentDidMount가 유용하게 사용되는가? setSTate를 render함수 내에서 쓰면 무한히 리랜더링이 일어나기 때문제 setState를 render함수 내부에서는 쓸수 없다는 것을 배운적이 있다. 즉 상태는 바꾸고 싶지만 render함수 내부에는 쓸 수 없을때 바뀌는 행위를 componentDidMount안에 작성.. React Hooks - useMemo(컴포넌트의 성능 최적화를 위해 사용되는 hook! useMemo와 useCallback) 출처: https://www.youtube.com/watch?v=e-CnI8Q5RY4 참고: https://velog.io/@eeeve/React-Hooks-useMemo (깔끔함) (잠깐 복습. 컴포넌트 최적화를 위해 사용되는 대표적 2가지 Hooks ==>> useMemo, useCallback 두번째 인자로 배열을 취하는 훅스 useEffect, useMemo, useCallback. useEffect는 component life cycle과 밀접하게 연관됨. 2번째 인자로 아무것도 안주면 componentDidUpdate의 역할을, 빈배열을 주면 componentDidMount의 역할을 함. useMemo 함수의 결과값을 반환함. useCallback 함수객체를 반환) useMemo에서 Memo란.. Code splitting(코드 스플리팅)에 대하여 공부동기: 제로초 영상시청중 소개됨 https://www.inflearn.com/course/lecture?courseSlug=%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%B1%84%ED%8C%85&unitId=71103&tab=community 출처: https://www.nextree.io/code-splitting/ 요약: Code splitting이란 UX(사용자 경험)를 좋게 하기 위한 것으로 초기 페이지 로딩속도를 계선하기 위한 방법이다. Code splitting의 구체적 방법으로 lazy, suspense가 사용된다. (페이지 로딩속도 개선에 대해 언급하니 이 영상이 생각남 https://www.youtube.co.. Webpack의 historyApiFallback에 대하여 요약: historyApiFallback이란? 개발중인 프로젝트의 라우팅의 작동하지 않는 문제를 해결하는 webpack.config.js파일의 속성 출처: https://velog.io/@wusi-hub/%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Webpack%EC%9D%98-historyApiFallback-%EC%84%A4%EC%A0%95%EC%9C%BC%EB%A1%9C-%EB%9D%BC%EC%9A%B0%ED%8C%85-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 라우팅은 웹 애플리케이션에서 특정 URL 경로에.. 리엑트 이미지 사용법(간단함) https://www.youtube.com/watch?v=8fIc1qCJ5HM 이전 1 2 3 4 5 다음
