FrontEnd/React (38) 썸네일형 리스트형 ****중요****Front에서 Back으로 데이터 요청(fetch, push시 사용되는 Fetch API, axios라이브러리에 대하여 관련 실습 코드: https://github.com/dhflekddy/React-and-ReactHookPractice/commits/main/fetchAndAxios 구체적 실습코드 여기에 모두 있으니 꼭보기, Readme도 꼭 보기fetch사용시 데이터를 서버에 post방식으로 전송시 반드시 지켜야 할 것: https://velog.io/@ctp102/SptringBoot-fetch-post-gson%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EC%86%A1-%ED%9B%84-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0그 외에서 웹 애플리케이션 서버로 스프링 부트를 사.. loadable() 이란? 요약: 코드스플리팅은 초기 로딩속도를 향상시키기 위한 것이다. CodeSplitting(코드분할)이란? 필요한 모듈을 정적으로 받아오는 것이 아닌 동적으로 런타임시에 필요할 때 필요한 모듈만을 불러오는 것. 즉 JS 코드 번들을 잘게 쪼개서 필요할 때마다 로드할 수 있도록 사용하는 기술! 즉, 미리 로드해야 하는 코드의 양을 줄여서 초기 로딩 시간을 개선할 수 있다! 코드 예시 import Component1 from "Components/Component1"; const Component2 = loadable(() => { return import("Components/Component2"); }); ... ... 협업하는 팀원이 만들어놓은 App 파일에서 6주차에야 눈에 들어온 loadable(). .. React Hooks - React.memo로 컴포넌트 최적화하기 (useMemo, useCallback) 정리: 리엑트에서는 기본적으로 부모컴포넌트가 랜더링되면 반드시 자식컴포넌트 역시 랜더링된다. 따라서 자식컴포넌트에서는 부모로부터 받는 props에 변화가 생길때만 랜더링이 발생하도록 해주면 최적화에 도움을 준다는 생각을 할 수 있다. 리액트로 개발을 하다보면 굳이 반복해서 렌더링될 필요가 없는 컴포넌트가 계속해서 반복적으로 많이 렌더링이 되는 문제를 한번쯤은 겪어봤을 것이다. 대부분의 경우 컴포너트의 렌더링 문제를 크게 고민할 필요는 없다. 하지만 렌더링이 너무 지나치게 자주 발생하거나 매번 렌더링마다 무거운 로직을 처리해서 성능에 부담을 준다면 이는 컴포넌트 성능에 매우 좋지 않으므로 해결하는 것이 좋다. 이러한 문제를 해결하기 위해 리액트에서 제공하는 React.memo를 알아보자. 더불어 useMe.. React Hooks - useCallback (실습포함) useCallbck과 useMemo의 차이점은? useCallback도 useMemo와 같이 컴포넌트 최적화를 위해 사용된다. 다만 useMemo는 결과로 return된 값을 memoization하지만 useCallback같은 경우 콜백함수 그 자체를 메모이제이션 해준다.(잠깐 복습. 컴포넌트 최적화를 위해 사용되는 대표적 2가지 Hooks ==>> useMemo, useCallback 두번째 인자로 배열을 취하는 훅스 useEffect, useMemo, useCallback.useEffect는 component life cycle과 밀접하게 연관됨. 2번째 인자로 아무것도 안주면 componentDidUpdate의 역할을, 빈배열을 주면 componentDidMount의 역할을 함.useMemo 함수.. React Hooks - useContext + Context API 참고: https://www.youtube.com/watch?v=LwvXVEHS638&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=5 https://react.dev/reference/react/useContext 이문서를 봐라. 모든게 여기서 부터 시작하고 여기서 부터 끝난다. 이거 해석하면 매번 두려움에 떨지 않아도 된다. 1️⃣ contextAPI와 useContext 사용이유 🤬 전역적인 정보들을 props로 전달하려면 단계별로 일일이 다 써주고, 수정시에도 불편하다. 🤬 전역적인 정보: User, 테마, 언어 ✅ 이럴때 사용하는 contextAPI, useContext ✅ 리액트에서는 이러한 문제점을 해결하기 위해서 contextAPI를 제공한다. conte.. React Hooks -useEffect와 useRef를 이용한 간단한 프로그램만들기 Q. 창에 들어가면 input창에 기본으로 focus를 주고 시작한다. Login버튼을 누르면 input창에 입력한 username에 대한 방문인삿말이 alert창으로 나온다(반갑습니다 ***님). alert창을 닫으면 input창은 비워져 있고 focus를 받은 상태로 존재한다. 정답을 보기 전에 input태그에 대해 좀 알아보기로 한다. 원래 코드는 위와 같이 단순히 type을 text로 주었다. 하지만 type을 빼고 name속성을 주면 또 안된다. 그래서 이전에는 어떻게 짲나? 찾아보았더니 아래와 같은 코드가 있었다. type을 빼고 onChange와 value를 준 형태다. 아직까지 둘의 차이점은 잘 모르겠으나 두개 모두 정상적인 결과를 가져온다. React Hooks -useEffect에 대하여 참고: https://hihiha2.tistory.com/169 훅스의 useEffect와 리엑트의 컴포넌트 라이프사이클은 밀접하게 관계된다. 위 글이 그 관계성을 어느정도 밝히는데 도움을 준다. useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다 useEffect Mount (화면에 첫 렌더링) Update (다시 렌더링) Unmount (화면에서 사라질때).. React Hooks -useRef에 대하여(3) ref객체와 일반변수와의 다른점. ref를 사용하기 좋은 경우 ref와 variable의 차이점을 보여주는 예. render시 ref의 current값은 초기화되지 않지만 render시 함수형 컴포넌트 전체가 다시 실행되는 것이므로 변수(variable)는 초기값으로 초기화되는 것을 아래 예의 결과에서 확인할 수 있다. import React,{useRef, useState} from "react"; const App=()=>{ const[render, setRender]=useState(0); const ref=useRef(0); let variable=0; const doRender=()=>{ setRender(render+1); } const upRef=()=>{ ref.current=ref.current+1; console.log(ref.current); }.. 이전 1 2 3 4 5 다음
