본문 바로가기

React4

[React] import path에 상대 경로를 절대 경로로 변경하기 src 하위 폴더의 파일에서 상대 경로로 다른 폴더의 파일에 접근할 때 폴더 구조가 복잡하고 깊은 경우 ../../components/A 형태로 ../이 많이 사용되고 가독성이 떨어진다. import A from '../../components/A'; import CommonB from '../../components/common/B'; import commonStyle from '../../lib/styles/common'; 절대 경로를 사용하면 특정 폴더를 기준으로 import path를 설정할 수 있다. 최상위 폴더 아래에 jsconfig.json (typescript인 경우 tsconfig.json) 파일을 생성한다 baseUrl 설정을 추가한다. 아래의.. 2020. 12. 27.
[Redux] Redux 기초 Redux 상태 관리 라이브러리 리액트에 종속되는 라이브러리가 아니다. 리액트에서 사용하려고 만들어졌지만 다른 UI 라이브러리/프레임워크와 함께 사용할 수 있다. (angular-redux 등 ...) 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다 리액트에서는 v16.3의 Context API를 기반으로 동작한다. 액션 action 상태에 변화가 필요하면 액션이 발생한다. 하나의 객체로 표현되고 type 필드를 반드시 가지고 있어야 한다. 프로젝트의 상태에 변화를 일으키는 것을 액션이라고 한다. 액션 이름은 문자열 형태이고 주로 대문자로 작성하며 고유해야 한다. (중복되면 에러가 발생될 수 있다) 주로 module_name/action_type 형태 (ex counter/I.. 2020. 12. 23.
[React] Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 발생 react-create-app으로 React 프로젝트 생성 후 Sass 사용을 위해 node-sass를 설치하고 .scss 파일을 import하면 아래와 같은 오류가 발생한다. ./src/components/A.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/components/A.scss) Error: Node Sass version 5.0.0 is inco.. 2020. 12. 22.
[ React ] React.PureComponent React.PureComponent ShouldComponentUpdate 라이프 싸이클 메소드가 이미 적용된 클래스 React.Component와 차이점 React.Component 는 ShouldComponentUpdate 메소드를 별도로 선언하지 않았다면 props, state 값이 변경되면 항상 re-rendering 한다. React.PureComponent 는 ShouldComponentUpdate 메소드를 선언하지 않아도 PureComponent가 Shallow level 에서 props 와 state 를 비교하여 값의 변경이 있을 때만 re-rendering 한다. React.Component와 공통점 클래스 기반의 컴포넌트 생성 방법. 차이점을 제외한 모든 것이 동일하다. @observe.. 2018. 1. 6.