코딩병원

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 해결 방법

이번 글에서는 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 에러 해결 방법에 대하여 알아보겠습니다. Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. [에러가 발생한 코드] import React from 'react'; import Route from 'react-ro..

1. 웹개발/1_1_8 Error Handling 2022. 1. 14. 12:32

<{모듈참조명} /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 해결 방법

이번 글에서는 is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 에러 해결 방법에 대하여 알아보겠습니다. is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. [에러가 발생한 코드] import React from 'react'; import {Route} from 'react-router-dom'; function App() { return ( // 에러가 발생한 코드 ) } export default App; [에러 원인] React에서 HTML 요소에는 소문자를 ..

1. 웹개발/1_1_8 Error Handling 2022. 1. 13. 12:08

[React] 쿠키 값, 시간 설정하는 방법

[쿠키란?] 쿠키란, 사용자가 접속한 웹 사이트의 서버를 통해 사용자 컴퓨터에 설치되는 정보를 말합니다. 보통 크롬과 같은 웹 브라우저에 쿠키가 저장됩니다. 쿠키는 사용자 정보를 저장하거나 마케팅을 위한 목적으로 사용될 수 있습니다. [react-cookies 설치] cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install react-cookies --save [예제] 예제를 통해서 어떤 식으로 동작하는지 알아보도록 하겠습니다. react-cookies를 통해 쿠키 만료 시간을 10년 후로 설정해보겠습니다. App.js import React, { Component } from 'react'; import CookiesSave from '...

1. 웹개발/1_1_5 React JS 2022. 1. 12. 12:00

[react] redux 미들웨어 정리 및 예제

[미들웨어란?] redux 미들웨어는 액션을 dispatch 함수로 전달하고 리듀서가 실행되기 전과 실행된 후에 처리되는 기능을 말합니다. redux 패키지에서 지원하는 applyMiddleware 함수를 사용하면 미들웨어를 간단하게 구현할 수 있습니다. [미들웨어 생성] 스토어 > 액션 > 미들웨어 > 리듀서 > 스토어 순으로 데이터가 기록이 됩니다. CallMiddleWare 함수는 다중 커링 구조로, 세 가지 인자를 순서대로 받습니다. 첫 번째 인자는 store, 두 번째 인자는 다음 미들웨어를 호출하는 함수로 예제에서는 미들웨어가 1개이기 때문에 reducer를 호출합니다. 커링(Currying) 함수 const CallMiddleWare = store => nextMiddle => action ..

1. 웹개발/1_1_5 React JS 2022. 1. 11. 12:43

[React] redux-logger 사용 방법

redux 미들웨어를 사용하여 개발을 진행할 때, 리듀서가 실행되기 전과 실행된 후를 log로 비교할 때 보기 어려웠던 점을 redux-logger 라이브러리로 보다 편리하게 확인하여 비교할 수 있습니다. [redux-logger 설치] cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install --save react-redux [적용] 여러개의 미들웨어도 적용 가능합니다. 미들웨어가 여러개인 경우 인수 순서대로 진행이 됩니다. import {createStore, applyMiddleware} from 'redux'; import {createLogger} from 'redux-logger'; import reducers from './re..

1. 웹개발/1_1_5 React JS 2022. 1. 10. 12:38

[React] react-redux 정리 및 예제

[Redux란?] 1. Redux 등장 배경 MVC 패턴 형식으로 state가 변화되면 Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조였습니다. 즉, 양방향 데이터 흐름이었죠. 양방향 데이터 흐름은 복잡하고 데이터 흐름을 판단하기 힘든 구조입니다. 이러한 해결방법으로 단방향 데이터 흐름이 있습니다. 그게 바로 Redux입니다. Redux는 MVC 패턴에서의 단점을 개선하는 것이 목적이었고 그 해결책으로 단방향 데이터 흐름을 적용하였습니다. View는 MVC 패턴과 달리 데이터를 변경시키지 않고 Action을 넘겨줍니다. 이때 Action은 반드시 Dispatcher를 통해서 데이터가 변경됩니다. 변경된 데이터를 Store를 통해 View가 전달받습니다. 2. Redux ..

1. 웹개발/1_1_5 React JS 2022. 1. 9. 12:05

[React] redux 데이터 변경하는 방법

[redux란?] redux는 컨텍스트와 마찬가지로 데이터를 필요한 컴포넌트에서만 요청해 사용할 수 있습니다. 컨텍스트는 부모 컴포넌트에서 생성한 데이터에 모든 자식 컴포넌트에서 접근할 수 있습니다. 하지만 redux에서는 컴포넌트 외부의 스토어라는 곳에서 관리합니다. 그래서 컴포넌트의 위치에 상관없이 스토어에 접근해 데이터를 사용하고 변경할 수 있습니다. redux는 데이터를 스토어 > 컴포넌트 > 액션 > 리듀서 > 스토어의 과정을 통해 변경합니다. [redux 세팅] 혹시 redux가 설치가 안되어 있다면, cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install --save redux [예제] 예제를 통해서 어떤 식으로 동작하는지 알..

1. 웹개발/1_1_5 React JS 2022. 1. 8. 12:24

[React] Context로 부모 데이터 변경하는 방법

Props는 데이터가 부모에서 자식 컴포넌트로 단방향으로만 이동할 수 있습니다. 하지만, Context를 사용하면 자식 컴포넌트에서 부모 컴포넌트의 데이터를 변경할 수 있습니다. [예제] 예제를 통해서 어떤 식으로 동작하는지 알아보도록 하겠습니다. 버튼을 클릭하면 ContextApi 컴포넌트의 state 값을 가져오는 예제입니다. App.js import './App.css'; import ContextApi from './Component/ContextApi'; function App() { return ( ); } export default App; ContextApi.js import React from 'react'; import Children from "./contextChildren"; co..

1. 웹개발/1_1_5 React JS 2022. 1. 7. 12:26

[React] Context 사용 방법 및 예제

Context란? 리액트는 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있기 때문에 부모가 가지고 있는 데이터를 자식에서도 사용하고 싶다면 props로 데이터를 넘겨주는 것이 일반적입니다. 그러나 전달해야 하는 데이터가 있는 컴포넌트와 전달받아야 하는 컴포넌트의 거리가 멀어질수록 코드는 복잡해집니다. A컴포넌트에서 제공하는 데이터를 D컴포넌트에서 사용하려면 props를 하위 컴포넌트로 필요한 위치까지 계속해서 넘겨야 합니다. 이러한 기법을 props drilling이라고 합니다. 이러한 props drilling을 극복하기 위해 등장한 개념이 바로 Context입니다. Context를 사용하면, 이러한 명시적인 props 전달 없이도 선언한 하위 컴포넌트 모두에서 자유롭게 원하는 ..

1. 웹개발/1_1_5 React JS 2022. 1. 6. 12:46

[React] 고차 컴포넌트란? (HOC, Higher-Order Component)

고차 컴포넌트는 컴포넌트 로직을 재사용하기 위해 사용되고 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. 즉, 컴포넌트를 인자로 받거나 반환하는 함수입니다. * 하이오더 컴포넌트(HOC, Higher-Order Component) 라고도 많이 불립니다. [주의 사항] render 메서드 안에서 고차 컴포넌트를 사용하시면 안됩니다. 컴포넌트의 정의 바깥에 HOC를 적용하여 컴포넌트가 한 번만 생성 정적 메서드는 반드시 따로 복사해야 합니다. 메서드를 반환하기 전에 컨테이너에 복사 hoist-non-react-statics를 사용하여 모든 non-React 정적 메서드를 자동으로 복사 정적 메서드를 컴포넌트와 별도로 내보내기 ref는 전달되지 않습니다. React.forwardRef API 사용 [예제..

1. 웹개발/1_1_5 React JS 2022. 1. 4. 12:00

[Javascript] 커링(Currying) 함수란?

커링(Currying)은 함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수입니다. 함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야 합니다. 커링을 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있습니다. * 커링과 같이 함수 자체를 인자로 받거나 반환하는 함수를 '고차 함수' 라고 부르기도 합니다. [일반적인 함수] function add(num1, num2) { console.log(num1 + num2); } add(5, 8); // 13 [커링(Currying) 함수] 커링을 사용하면 num1 하나를 파라미터로 받고, 그 다음으로 num2를 파라미터로 받아서 함수를 재사용할 수 있습니다. function add(num1, num2) { return n..

1. 웹개발/1_1_1 JavaScript 2022. 1. 3. 12:52