React.Component와는 React 메소드중 하나인 shouldComponentUpdate를 다루는 방식이 다르다.React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있고,props와 state를 얕은 비교를 한 뒤 변경

PropTypes.node = node는 컴포넌트의 return ( ) 안에 들어가는 모든 것 들이다. {} === {} /// false 객체는 서로 같지 않다.Inline으로 쓴 style때문에 그 태그가 리렌더링이 발생해버린다.styled-component나

타입스크립트에서 함수를 선언할때는 아래와 같은 방식으로 선언한다.기존 자바스크립트 함수 선언 방식에서 매개변수와 반환값에 타입을 추가한다.타입스크립트에서는 함수의 인자를 모두 필수값으로 간주한다. 따라서 함수의 매개변수를 설정하면 undefined나 null이라도 꼭

위와 같은 명령어로 타입스크립트로 작성한 코드를 javasciprt로 컴파일링 할 수 있다.매번 타입스크립트 버전명을 같이 적어주는것은 번거로우니 tsc 옵션 설정 파일을 만들자이와 같이 tsconfig.json 파일에 target: es2020을 써주면 tsc 컴파일

TypeSciprt란?MicoMicroSoft에서 개발하고 관리하는 오픈소스 프로그래밍 언어자바스크립트의 SuperSet으로 최신 ECMA를 발빠르게 지원한다.정적 타입 언어이기에 타입 안정성을 보장한다.참고로 JavaScript는 동적 타입 언어이기에 타입 안정성이

ES2020의 문법으로 모듈을 빌드타임이 아닌, 런타임에 불러오도록 한다.첫 페이지 진입시, 필요한 최소한의 코드만 다운받고, 특정 페이지 이동시마다 필요한 코드를 로드 할 수 있게끔 하여 초기 성능을 높이기 위함.초기 로딩때 당장에 불필요한 기능까지 모두 로딩하는것보

정적 페이지 생성을 지원하며 빌드타임때 딱 한번 실행된다.빌드시 값은 고정되며 이후에는 변경 할 수 없다.페이지를 렌더링 할 때만 필요한 데이터를 불러올때 사용한다.페이지가 미리 렌더링되어야 할 떄 사용하면 좋다.getStaticProps와 함께 쓰인다.동적 라우팅을

getInitialProps 호출URL주소로 직접 페이지에 접근하면 Node환경에서 getInitialProps가 호출됨웹브라우저(클라이언트) 에서 SPA로 화면을 이동 할 경우 브라우저 환경에서 getInitialProps가 호출됨getInitialProps의 리턴값

redux와는 다른, 또 다른 리액트 상태관리 라이브러리다.redux와 마찬가지로 react의 종속적인 라이브러리는 아니므로 어디서든 쓸 수 있다.MobX를 사용하고 있는 앱의 상태는 관측 가능하다.앱에서 사용하고 있는 state는 변할 수 있으며, 만약 특정 부분이

React의 Server Side Rendering을 쉽게 구현 할 수 있게 도와주는 간단한 프레임워크이다.React만으로 자체적으로 SSR을 구현 할 수 있지만, 생각보다 복잡하기에 Next가 등장했다.과거 웹 사이트들은 대부분 SSR로 동작되어 왔기에 페이지가 여러

상태를 직접 바꾸는것은 컴포넌트로 하여금 리렌더링 되는것을 막거나 Redux-dex-tool의 시간여행 기능을 작동하지 못하게 할 수 있다.복사 한 값을 변경하는것은 괜찮다. Immer 라이브러리를 사용하고 있다면 실제 값은 변경되지 않기에 직접 변경하는 로직을 작성해

fileReader로 img파일의 결과를 toString()axios를 이용한 formData 전송console.log(render)의 결과

createSlice는 생성된 reducer함수를 reducer라는 필드를 포함하는 "slice"객체와 actions이라는 객체 내부에서 생성된 액션 생성함수를 반환한다.리덕스 모듈 하나를 만들기 위해서는 action type을 정의하고, actionCreator를 만

onClick으로 함수를 연결해 클릭시마다 transform : translate3d의 값이 700씩 늘어난다.

클론 한 사이트 : WatchaPedia팀 명 : Watcha & ChillReact.jsReact-Router-DomGItRedux (평가하기 페이지 한정)별점 라이브러리차트 라이브러리Slick 구현Infinity Scroll 구현fetch를 사용해 Backend와

1차 프로젝트때 이미 리덕스 툴킷을 조금 적용시켰다.2차 프로젝트때는 조금 더 심도있게 파고들기 위해서 리덕스 툴킷을 조금 더 공부해보자.리덕스를 사용하다보면 코드의 양이 계속 늘어나기 마련이고 그에따라 계속 복잡해져만 간다.리덕스 툴킷을 적용하면 코드를 상당부분 줄일

1차 프로젝트때는 fetch로 backend와 통신을 했다. 2차때는 Axios 사용을 위해 미리 공부해보자.브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리크로스브라우징에 최적화 되어있다.브라우저에선 - XMLHttpRe

Route에 component 대신 render를 넣어서 화살표함수로 컴포넌트를 넣어주면 props를 줄 수 있다.이 방식으로 state의 값에 따라 조건부 렌더링을 먹일 수 있다.

현재 ClassComponent로 왓챠피디아 클론을 진행중인데, 더미데이터를 만들어서 fetch 함수로 불러와 화면에 뿌려주기 위해 사용했다.!\[Items.js-\_watcha_and_chillWSL_Ubuntu-20.04-현재 state의 movieList에