리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #8 async | Node + Express 서버와 React 연동 보호되어 있는 글입니다. 리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #8 PWA setting 보호되어 있는 글입니다. 리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #7 성능개선 개발자도구 | lazy import | useMemo | useTransition | useDeferredValue * 크롬 확장프로그램 : React Developer Tools 버그 발생했을 때 웹의 검사에서 Elements에서 하나하나 확인해야되는데 그게 싫고 컴포넌트로 미리 보고 싶을 때 이용. 컴포넌트에 props랑 state가 어떻게 반영되고 있는지 궁금할 때 확인. 컴포넌트에 props가 잘 전송되어있는지 state도 바로 확인하고 수정할 수 있음. * Profiler 탭 녹화 버튼 클릭 -> 페이지 이동이나 버튼 조작 -> 녹화 끝 위를 실행하면 방금 렌더링된 모든 컴퍼넌트의 렌더링시간을 측정해줌. 지연을 발생시키는 컴포넌트를 찾아낼 수 있음. -> 보통은 걱정할 일 없음. 지연 원인의 대부분은 서버 문제인 경우가 많음 (ajax요청 결과가 늦게 도착) * Redux Developer Tools 크롬 웹.. 리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #6 localStorage * 리액트에서 자주 쓰는 if문 작성패턴 5개 : JSX 이용해서 html 작성할 때 if문 대신해서 사용할 수 있는 5가지 - component 안에서 쓰는 if / else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } if를 function 안에 넣어서 return 안에서 못 쓰니까 return + JSX 전체를 내 뱉는 if문을 작성해서 사용 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } else와 중괄호 생략 가능. (왜냐면 자바스크립트 function 안에선 return 이라는 키워드를 만나면 return.. 리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #5 Context API | Redux Toolkit * props가 너무 복잡해서 사용하기 어려울 때 해결방법 component 끼리 state 전송하려면 부모-> 자식 간에만 가능하기 때문에 여러 컴포넌트가 중첩되면 props전송을 수십번 해야될 수 있음. - Context API 사용 : React 기본문법. 단점이 많아서 사용을 안 하는 추세. 단점 state 변경 시 컴포넌트까지 전부 재 렌더링 됨 useContext()를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 import를 해야됨 - 외부 라이브러리 Redux 사용 : Context API의 단점을 보완 할 수 있음 컴포넌트들 간에 props없이 state 전송이 가능함. state를 하나의 통에 보관해서 어느 컴포넌트에서든지 간편하게 사용 가능하게 만듦. * 장바구니 페이지 h.. 리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #4 AJAX | Fetch | Transition * 서버로부터 데이터 불러오기 서버에 데이터를 요청 서버: 데이터를 요청하면 데이터를 보내주는 프로그램 서버에 데이터를 요청하는 방법 : get(서버에서 데이터를 가져올 때 사용)이나 post(데이터를 서버로 보낼 때 사용)방법으로 url형식으로 자료를 보내라고 요청함. url은 서버 개발자한테 알려달라고 해서 알아냄. 서버 개발 시 짜는 코드 예시 "누가 comic.naver.com으로 요청하면 웹툰 보내주세요" 라는 내용의 코드를 짬. * GET 요청 - 웹브라우저의 주소창에서 get 요청할 수 있음 : get, post 요청 시 새로고침됨. - ajax 사용 : java script로 새로고침 없이 get, post 요청 가능 * AJAX : 서버에 GET, POST 요청할 때 새로고침 없이 데이터.. 리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #3 Lifecycle과 useEffect * 컴포넌트 life cycle mount : 페이지에 뜨는 것 (장착) update : 재렌더링되는 것 unmount : 필요없으면 제거됨 , 다른 페이지로 이동 컴포넌트의 인생이라는 뜻인데 이런걸 알면 중간중간에 코드실행이 가능해짐 Detail 컴포넌트 등장 전에 이 코드를 실행해라. ". 사라지기 전에 이 코드 실행해라. 등등.. 장착될 때 원하는 코드를 실행한다거나, 컴퍼넌트가 제거될 때 실행할 코드를 달아둘 수 있는데 용이함. -> Lifecycle hook을 이용해서 코드를 넣어주면 됨. * useEffect() : Lifecycle hook useEffect import한 뒤 콜백함수 추가해서 안에 코드 적으면 컴포넌트가 mount & update시 그 코드가 실행됨. import {useS.. 리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #2 리액트라우터 * 페이지 나누기 : 리액트는 single page application라서 index.html 이라는 하나의 html 파일만 사용하기 때문에 react-router-dom이라는 외부 라이브러리 설치해서 사용함. * 라우터로 페이지 나누는 법 1. react-router-dom 설치 1) 터미널 열고 npm install react-router-dom@6 입력해서 설치 한 뒤 2) index.js 파일로 가서 import 한 뒤 하단과 같이 을 로 감싸줌. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 2. 상단에 .. 이전 1 2 3 4 다음 목록 더보기
