TIL-REACT

웹이 점점 복잡해져서 UI를 만들기 위한 Javascript 라이브러리리액트는 가상돔(virtual dom)을 통해 ui 를 빠르게 업데이트이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소집합을 계산하는 기술—> 불필요한 업데이트를 줄일 수 있음.실제돔을 간략하게

Props

key란? 리액트가 내부에서 element를 자동으로 여러개 생성하는 경우에는 console에 에러가 뜬다.! Why? 예를 들면 li 태그를 여러개 생성했을 경우, → 자동으로 여러개 생성된 각각의 항목들은 key라는 props가 있어야 한다 이유는 목록을 구별할

첫번째 .then은 json파일을 JS로 바꾸는 역할두번째 .then은 로직을 처리하는 부분CardList 컴포넌트에 monsters를 props로 전달SearchBox 컴포넌트에 handleChange 메소드를 props로 전달.filter 메소드활용monster라는

React 는 props 를 받아 jsx를 반환 (props ⇒ jsx) 함수형 컴포넌트 클래스형 컴포넌트와 함수 컴포넌트의 특징 클래스 : state, 라이프사이클 때문에 사용 함수는 한번 호출되면은 메모리상에서 사라짐 → state, 라이프사이클 불가능. 항상

리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구 (Toolchain)CRA뿐만 아니라 Next.js / Gatsby 등이 있다.TypeScript 과제를 수행하기 위해 초기세팅을 혼자서 했다.로컬 컴퓨터에서 폴더을 만들어서 react 설치 후 깃허브와 연

React Router 화면 전환하는 Router CSS 전처리기 Sass SPA 란? single page application : 페이지가 1개인 애플리케이션 페이지 수만큼 html 파일이 존재 (mpa방식)하지만 리액트 프로젝트에서 .html 파일은 1개

에러를 읽으면 답이 보인다.그렇지만 어디에 에러가 났는지 정확하게 알 수가 없는 경우도 있다.Link component에 관련해서 에러가 두 번이나 났다.경로가 잘못 지정되면 하기와 같은 에러문구들이 뜬다!.properties of nullLink error이 경우에는

제품 상세 페이지에서 "결제하기" 를 눌렀을 때, 결제페이지로 이동하면서 데이터를 전달해야 한다.다음주 월요일까지 프론트에서 주문정보를 보내서 서버에 저장되고 난 다음에 결제하는 외부 API 호출한 후, 결제를 하고.. 또 결제정보를 서버로 보낼 수 있도록 해야한다..

현재 사용자가 어느 페이지에 있는지 표시하기 위해 페이지 이동 할 때마다 GNB color 변경페이지 이동은 Link로, color 변경은 onClick 으로 단순하게 생각했었다.페이지에 머무르는 동안에는 GNB color를 유지해야 하고, 페이지 이동 할 때마다 co

pathname이 일치하면 GNB tab color 유지하기전 글에서 보다시피 GNB에 따른 페이지 이동 시, color 변경은 해결되었지만 문제가 있었다.예를 들어 검색페이지가 있고, 검색결과페이지가 있다면 이 둘 모두 GNB에 있는 검색탭이 변동없이 color가 유