코딩하는 고릴라

리액트 프로젝트를 진행하는데 있어 메모이제이션을 고려한 최적화는 생각해 본 적이 없었습니다. 이와 관련하여 성능적으로 보다 우수한 프로젝트를 진행해보고자 이에 대해 학습해 보았습니다. 1. React.memo() 첫번째로 React.memo()의 기능을 테스트를 통해 확인하였습니다. 먼저 React.memo를 적용시키기 이전입니다. App 컴포넌트의 state를 변경시켜 App 컴포넌트의 리렌더링을 일으켰습니다. 이 때 하위 컴포넌트인 Child 컴포넌트도 따라서 리렌더링 되는 것을 볼 수 있습니다. 다음은 Child 컴포넌트에 React.memo를 적용시킨 결과입니다. 이 때는 App 컴포넌트의 state를 변경시켜 리렌더링 시켜도 하위 컴포넌트인 Child 컴포넌트에서의 리렌더링이 일어나지 않고 있습..

1. Lifecycle 1. 컴포넌트 생성(mount) 2. 컴포넌트 업데이트, 재렌더링(update) 3. 컴포넌트 제거(unmount) Hook을 이용하여, 각각의 라이프사이클 단계에서 함수를 실행시킬 수 있음 - Line 2 : useEffect 임포트 - Line 6 : useEffect() 내에 컴포넌트가 mount 혹은 update 됐을 때 실행시킬 함수 넣어주기 => 해당 컴포넌트가 mount 되거나 update 될 때, 브라우저의 콘솔창에 "하위!" 가 출력 1-1. useEffect - useEffect 안에 적어놓은 코드는 컴포넌트의 html이 모두 렌더링 된 후에 실행 - 따라서 연산이 오래걸리는 작업들을 useEffect 안에 넣어두면, 일단 html 요소는 화면에 렌더링 된 후 해..

Styled-components .css 파일을 사용하지 않고 .js 파일 내에서 html요소에 스타일을 적용하기 위해 사용 기존의 .css 파일에서 스타일을 적용하지 않고 각 .js 파일에서 적용하기 때문에, class명이 겹치는 경우 스타일 적용이 중복으로 이뤄지지 않는다. 1. 설치 npm install styled-components 2. 사용 Line 6 - styled-components 임포트하기 Line 8 - styled라는 이름으로 임포트한 styled-components를 이용하여 스타일이 적용된 컴포넌트 ‘Box’ 생성하기 Line 19 - 위에서 만들어진 스타일이 적용된 ‘Box’ 컴포넌트사용 일반 css 파일의 적용 범위 한정하기 (모듈화) .css 파일의 이름을 [컴포넌트명.m..

🐫URL Parameter 똑같은 레이아웃 내에서 출력 내용 일부만 달라질 때 사용 - 상품의 상세페이지(레이아웃은 같으나 어떤 상품인지에 따라 출력 내용이 달라짐) /detail/0, /detail/1, /detail/2 등 URL에 파라미터 지정 (/detail/:id) 해당 라우터 컴포넌트에 props 전달 해당 컴포넌트 내에서 useParams 임포트 useParams를 이용해 URL의 파라미터 가져오기 해당 파라미터 사용 App.js Line 9 - Route Path에서 /detail의 뒤쪽에 :id 라는 이름의 파라미터 붙이기 [Path=”/detail/:id] - ProductDetail 컴포넌트에 상품 정보를 담고있는 products를 전달 ProductDetail.js Line 3 - ..

navigate 페이지 이동 기능 구현을 위해 사용 Link 태그를 대신해 사용 가능 import { useNavigate } from 'react-router-dom' function App(){ let navigate = useNavigate() { navigate('/detail') }}>이동버튼 } useNavigate 임포트 useNavigate() 이용해 선언 navigate( ‘경로’ ) 와 같이 사용 navigate(-1) : 뒤로 가기 위와 같이 라우터 경로를 지정하면, 따로 지정이 안된 모든 경로에 대해 위 라우터에 지정된 컴포넌트를 출력 → 404 에러 페이지 등에 사용 nested routes, outlet 경로 내 경로의 요청에 대해 컴포넌트를 출력하기 위해 사용 /about/co..

🦥 라우팅 - 셋팅, 기본 라우팅 페이지 나누는 방법 컴포넌트 만들어서 페이지 디자인 누가 /detail 요청시 해당 컴포넌트 출력 ⇒ react-router-dom 라이브러리 사용하여 구현 react-router-dom 설치 설치 // 터미널 npm install react-router-dom@6 셋팅 // index.js import { BrowserRouter } from "react-router-dom"; 컴포넌트를 로 감싸준기 페이지 나누기 1. 요청에 따라 출력시킬 컴포넌트 나누기 // App.js import { Routes, Route, Link} from 'react-router-dom' function App(){ return ( // 메인 페이지 // detail 접속 ..