React

현업에서 가장 많이 쓰인다는 라이브러리중 React에 대해 정리해보겠다.React를 왜 사용하는지 어떤 구조로 작동하는지에 대해서!!!요즘 웹은 정적이고 단순한 페이지가 아니다.웹 페이지가 아닌 웹 어플리케이션이라 불릴 정도로 복잡하고 동적이다. 웹 애플리케이션의 규모

우선 원하는 디렉토리로 이동후 npx create-react-app 폴더명(리액트로 작업할 프로젝트명)npm install react-router-dom --savenpm install node-sass --save( CRA와 node-sass 호환이 안되는 버전이 있

SPA( Single Page Application )란?페이지가 한 개인 애플리케이션한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은? >>> Routing리액트 프로젝트에서 .html파일의 개수는 1개이다.SPA 형식은 빠른 반응성, 화면 전환

라이프사이클이란? React 컴포넌트에는 생명주기가 있다. 컴포넌트의 생명주기가 Lifecycle!에 대해 알아보고 관련된 에러를 해결하는 방법까지 정리하겠다.constructor()컴포넌트가 처음 실행할 코드들을 작성한초기설정 및 State를 정할때 사용한다.rend

👆 위 에러가 왜 뜨는지 알아보자위 코드를 실행하면 TypeError 에러가 뜬다.에러메시지를 읽어보면 말 그대로 undefined 에 대하여 map 함수를 실행하려 했다는 뜻.undefined에 map 함수를 쓰진 않는데this.state.data.message가

라우팅 이란, 다른 경로(url 주소)에 따라 다른 화면를 보여주는 것이다.프로젝트에서 react-router-DOM 라이브러리를 사용해 라우팅을 구현했었다.지금까지 해온 라우팅 방법으로는 완전히 정해진 경우(정적, static)에 대해서만 경로를 표현 했었다.: 는

React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다.먼말이냐아래 이미지로 볼때 count를 클릭 할때마다 콘솔에 랜더링됨 이 계속 찍힐꺼다.이말은 불필요한 렌더가 될 수 있다.물론 생명주기 생각해서 억지로 막을 수 있겠지만