코드코코

Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. - styled-component 사용 시 발생하는 문제 - input 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러 - 해결책: 안에 값을 제거 출처 https://steadily-worked.tistory.com/464 [디버깅] Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. Error: input is a void element tag and must nei..

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 하..

프로퍼티(Props) - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용. - 속성(attribute) 형태로 전달. - 이 때, 프로퍼티 값은 수정할 수 없다. - 자바스크립트의 자료형을 모두 사용할 수 있음. - import PropTypes from "prop-types"; >prop-types라이브러리를 PropTypes 이름으로 임포트 함. props.children : 컴포넌트 태그그 사이에 넣은 값을 조회

JSX(JavaScript XML) - 자바스크립트에 XML을 추가한 확장형 문법 - 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리 - HTML이 아니라 XML의 마크업 규칙을 따른다. - 리액트 엔진을 통해 JSX파일이 기존 자바스크립트로 해석됨.(선언형 화면 기술) JSX가 javaScript로 제대로 변환되기 위해서 지켜주어야 하는 규칙 - 꼭 닫혀야 하는 태그(Self Closing 태그) - 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 함. >> >> (Fragment) : 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다. - JSX 안에 자바스크립트 변수를 보여줘야 할 때에는 { }으로 감싸서 보여줍니다. - style 과 className >> 인라인..

Node.js 상에서 TypeScript Compiler를 통하지 않고도, 직접 TypeScript를 실행할 수 있게 함. #타입스크립트와 ts-node를 전역설치 npm install -g typescript npm install -g ts-node