라우터는 사실 react뿐만 아니라 자바스크립트 기반 프레임워크에 다 공통된 내용이다 react는 SPA기반 → 싱글 html로 구성  그전에는 대부분 MPA 기반이라페이지마자 html이 따로 존재하였다 실제로 내가 만들어본 페이지도 메인페이지 html서브페이지 html 다 따로 만들어서 진행했는데 이 방식은 페이지 이동이 굉장히 느리고 파일도 되게 무거워진다 그러나 SPA는 html은 하나고 jsx를 여러개로 만들어 구조 html 은 하나로 두고안에 있는 내용만 jsx로 바꾸면 되서 페이지 이동이 빠르고 실제로 페이지는 재시작 되지 않는다 관련 jsx에 접근할 수 있게 만들어주는 역할이 라우터이다!  라우터 라이브러리는 터미널에서 npm i react-router-dom 쳐주면 깔린다번외로 vue에서 ..

https://mm-study-front.tistory.com/55 [React.js] Context컴포넌트 간의 데이터를 전달하는 방법 기능은 https://mm-study-front.tistory.com/36 [React.js] Props부모컴포넌트가 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 것 모듈화 할 때 버튼mm-study-front.tistory.com   이전 글 Context는 props을 대신하여 데이터를 보낸 것props를 안 쓰면 데이터를 받아 쓰는 방법은?? → 리액트 훅의 종류인 useContext 사용  https://mm-study-front.tistory.com/43 [React.js] React Hooks클래스 컴포넌트의 기능을 함수 컴포넌트에서 사용..

컴포넌트 간의 데이터를 전달하는 방법 기능은 https://mm-study-front.tistory.com/36 [React.js] Props부모컴포넌트가 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 것 모듈화 할 때 버튼을 만들고 속성만 바꿔주면 되기 때문에 굉장히 편하다 일반적인 문자열같은 자바스크립mm-study-front.tistory.com와 동일한데  props의 단점까지 보완 가능 → props는 부모에서 자식으로만 데이터 전달 가능       그래서 프로젝트 진행할 때  트리구조식 자식의 자식에게 주고 받을 수가 없어  app.jsx에 많은 코드들이 쌓이게 됨     →이를 프롭스 드릴링(Props Drilling)이라 함context는 props가 전해주던 데이터들을 ..

리액트 훅 중 하나로 불필요한 함수의 재생성을 방지할 수 있다 https://mm-study-front.tistory.com/43 [React.js] React Hooks클래스 컴포넌트의 기능을 함수 컴포넌트에서 사용할 수 있도록 도와주는 메서드 과거에는 클래스 컴포넌트만 모든 기능을 이용할 수 있었고, 함수 컴포넌트는 UI 랜더링만 가능했었음→  근mm-study-front.tistory.comhttps://mm-study-front.tistory.com/53 [React.js] React.memo리액트의 내장함수로 컴포넌트를 인수받아 최적화된 컴포넌트로 만들어서 반환해 준다 이 결과로 반환된 컴포넌트는 props를 기준으로 기억됨 https://mm-study-front.tistory.com/39 [..

리액트의 내장함수로 컴포넌트를 인수받아 최적화된 컴포넌트로 만들어서 반환해 준다 이 결과로 반환된 컴포넌트는 props를 기준으로 기억됨 https://mm-study-front.tistory.com/39 [React.js] State와 Props리액트 컴포넌트에는 여러 개의 state가 들어올 수 있음→ https://mm-study-front.tistory.com/38  리액트는 prop라는 기능이 있어서 상속이 편리→https://mm-study-front.tistory.com/36 [React.js] Props부모컴포넌트가mm-study-front.tistory.com 그래서 부모가 리렌더링이 되더라도 props가 바뀌지 않으면 리렌더링이 되지 않음 → 불필요한 리렌더링 방지로 웹 성능 최적화 O..

리액트 훅 중 하나로 불필요한 연산을 최적화해준다 동일한 연산이 반복되면 계속 다시 연산시키는 게 아니라최초에 한번 연산 후 메모리에 결괏값을 저장하고 그 값을 가져오는 방식 자식 컴포넌트 내부의 연산은 부모 컴포넌트가 리렌더링이 되면 계속 재실행된다이는 연산이 짧으면 그나마 괜찮으나 연산이 길어지면 웹 성능을 떨어뜨림→ 이때 useMemo를 사용해서 연산이 불필요하게 수행되지 않게 하는 거임 https://mm-study-front.tistory.com/51 [React.js] 최적화최적화 (optimization): 목적에 따라 가장 좋은 결과가 얻어지도록 성능을 개선하는 행위로  컴파일러에서 원시 프로그램이 목적 프로그램을 생성하는 과정에 있어서, 목적 프로그램의 실행 시간mm-study-front..