코드코코

styled-components -CSS in JS 관련 리액트 라이브러리 중에서 인기 있는 라이브러리 -tagged template literal 사용하여 컴포넌트의 props를 읽어옴. -CSS in JS 에서도 비슷한 유틸 함수를 사용하고 싶다면 polished 라는 라이브러리를 사용 ThemeProvider -styled-components 로 만드는 모든 컴포넌트에서 조회하여 사용 할 수 있는 전역적인 값을 설정

CSS module -CSS 클래스가 중첩되는 것을 완벽히 방지 -CRA 로 만든 프로젝트에서 CSS Module 를 사용 할 때, CSS 파일의 확장자를 .module.css 로 한다. -styles.icon 이런 식으로 객체안에 있는 값을 조회 >>만약 클래스 이름에 - 가 들어가 있다면 다음과 같이 사용: styles['my-class'] >>여러개가 있다면 다음과 같이 작성: ${styles.one} ${styles.two} >>조건부 스타일링 : ${styles.one} ${condition ? styles.two : ''} - Sass 에서도 사용가능 : 확장자를 .module.scss 로

Sass - pre-pocessor이다. pre-processor는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 역할을 수행해주는 것을 의미. //Sass 를 CSS로 변환해주는 역할 yarn add node-sass - 변수 선언가능 : $변수명 - 함수 사용가능 : 함수명() - 반복이 되는 코드는 재사용 가능 : @mixin기능 - ...rest props 사용 : 지정한 props 를 제외한 값들을 rest 라는 객체에 모아주고, 태그에 {...rest} 를 해주면, rest 안에 있는 객체안에 있는 값들을 모두 태그에 설정 해줌. import React from 'react'; import classNames from 'classnames'; import './Button.scs..

import * as React from 'react'; (* as 를 하는 이유) -export default 없는 애들이나 module.exports로 된 애들은 * as로 해야 합니다. * as는 자바스크립트에도 존재하는 문법입니다. 모든 export들을 모아서 하나의 변수 안에 모아줍니다. -import * as React from 'react';하면 React.useEffect, React.useCallback 이렇게 접근 가능합니다. 출처 https://www.inflearn.com/questions/110639 import * as React from 'react' 질문있습니다. - 인프런 | 질문 & 답변 * as를 붙이는 이유가 단순히 리액트는 export default가 없어서 붙이는 ..

Immer - 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해도 Immer 가 불변성 관리를 대신 해준다 //불러오기 import produce from 'immer'; const state = { number: 1, dontChangeMe: 2 }; //첫번째 파라미터에는 수정하고 싶은 상태 //두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수 //두번째 파라미터에 넣는 함수에서는 불변성에 대해서 신경쓰지 않고 //그냥 업데이트 해주면 다 알아서 처리해줌 const nextState = produce(state, draft => { draft.number += 1; }); console.log(nextState); // { number: 2, dontChangeMe: 2 }..

특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업은 빈번히 발생하는 데, 만약 3~4개 이상의 컴포넌트를 거친다면 매우 번거로운 일이다ㅣ. 이를 해결하는 방법은 Context API와 dispatch를 함께 사용하는 것이다. Context API - 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있음. - 여기서 값은 상태, 함수, 외부 라이브러리 인스턴스, DOM 일 수 있음. //Context를 만들 때 const UserDispatch = React.createContext(null); /* createContext 의 파라미터에는 Context 의 기본값을 설정. 여기서 설정하는 값은 Context 를 쓸 때 값을 따로 지정하지 않을 경우 사용되는 기본 값 */..

리덕스 - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 - 리액트 뿐만아니라 앵귤러, 제이쿼리 등 다양한 프레임워크와 작동되게 설계됨. 키워드 1. 액션(Action) - 상태에 어떠한 변화가 필요하게 될 땐, 액션이란 것을 발생시킴. - 하나의 객체로 표현되며, type 필드를 필수적으로 가지고 있어야 함. - 어플리케이션의 store(스토어), 즉 저장소로 data를 보내는 방법. // action의 type을 정의 const Acion_type = 'Acion_type' //action { type:'Acion_type' } 2. 액션 생성함수(Action Creator) - 파라미터를 받아와서 액션 객체 형태로 만들어주는 함수 - 어떤 변화를 일으켜야 할 때 마다 액션 객체를 만들어야 하는데..

useState : 가변적인 상태를 지닐 수 있게 해줌 const [state,setState] = useState(0); - 함수가 호출되면 배열을 반환 - [ 상태 값, 상태를 설정하는 함수 ] useEffect : 리액트 컴포넌트가 리렌더링될 때 마다 특정 작업을 수행하도록 설정 할 수 있음 (마운트,언마운트, 업데이트시) 마운트 시에 하는 작업들 - props 로 받은 값을 컴포넌트의 로컬 상태로 설정 - 외부 API 요청(REST API 등) - 라이브러리 사용 (D3 , Video.js 등...) - setYnterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업예약 언마운트 시에 하는 작업들 - setIntervla, setTimeout 을 사용하여 등록한 작업들 clear 하..