개발자를 꿈꾸는 퍼블리셔

[ReactJS] 리액트 오류, Objects are not valid as a React child

Objects are not valid as a React child (found: object with keys {type, payload}). If you meant to render a collection of children, use an array instead.  이 오류는 리액트 컴포넌트에서 객체를 직접 렌더링하려 할 때 발생하는 오류이다. 리액트는 객체를 직접 렌더링할 수 없다. 예를 들어, payload 또는 type과 같은 객체 속성을 렌더링하려고 할 때 이 오류가 발생한다.  오류 발생 원인Objects are not valid as a React child (found: object with keys {type, payload}). 오류는 컴포넌트에서 type과 payload와 같은..

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks    오류 발생 원인useEffect가 조건문 안에서 호출되거나, 렌더링에 따라 조건적으로 호출되는 경우에 React가 훅을 호출하는 순서를 추적할 수 없어서 에러가 발생한다.예를 들어, useEffect가 조건에 따라 호출되면, React는 그 조건이 변경될 때마다 훅이 호출되는 순서가 달라지므로 상태를 관리할 수 없다.   오류 해결방법useEffect를 제일 최상단에 넣으니까 해결된 이유는 리액트 훅 규칙 때문이다. 리액트 훅은 ..

[eslint] src\pages\CartPage\index.jsLine 4:3:  React Hook "useEffect" is called in function "cart" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooksSearch for the keywords to learn more about each error.  오류 발생 원인이 오류는 리액트 컴포넌트의 이름이 소문자..

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리   리액트란(React)?리액트(React)는 페이스북에서 개발한 자바스크립트 기반의 UI 라이브러리다. 2013년에 처음으로 오픈소스로 공개됐다. 웹 애플리케이션의 뷰(View)를 구축하는데 초점이 맞춰져있고, 컴포넌트 기반 아키텍처를 통해 UI를 재사용할 수 있다. 2015년에 React Native가 발표되면서 모바일 앱 개발에서도 리액트의 인기가 급증했다. React Native는 기존의 자바스크립트와 리액트의 개념을 사용하여 네이티브 모바일 앱을 개발할 수 있도록 했습니다. 이로 인해 리액트는 웹뿐만 아니라 모바일 앱 개발에서도 매우 중요한 기술로 자리잡게 되었다. 리액트를 사용하려면 자바스크립트를 기본적으로 이해하는 것이 좋다. 리액트는 ..

Module not found : Error: Can't resolve 'web-vitals' in '경로' ERROR in ./src/reportWebVitals.js 5:4-24Module not found: Error: Can't resolve 'web-vitals' in '경로'  이 오류는 web-vitals 모듈이 설치되어 있지 않거나 제대로 설치되지 않았을 때 발생한다. web-vitals는 리액트 애플리케이션에서 성능을 측정하기 위한 라이브러리인데 이 라이브러리가 설치되지 않으면 아래와 같은 오류를 띄운다.     web-vitals 모듈 설치하기터미널에서 다음 명령어를 실행하여 web-vitals 패키지를 설치한다. web-vitals 가 설치되지 않아서 발생하는 경우가 대부분이므로 대부..

state 개념 정리리액트의 state는 컴포넌트의 동적인 데이터를 관리하는 객체로, 시간에 따라 변할 수 있는 상태를 나타낸다. state가 변경되면 리액트는 자동으로 해당 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 유지하므로, 사용자 입력, API 응답, 타이머 등 변화하는 데이터를 효율적으로 관리할 수 있다. 리액트의 변수에는 일반변수와 state 변수가 있는데 변수 값을 직접 변경하는 일반 변수와는 달리 state 변수는 setState 또는 useState를 사용해 변경할 수 있다.일반 변수는 값을 변경해도 UI가 자동으로 업데이트 되지 않지만 state 변수는 값을 변경하게 되면 리액트가 자동으로 UI를 다시 랜더링한다. 이는 리액트가 직접 state 변수 상태를 관리하기 때문이다. 그래서..

JSON(JavaScript Object Notation)이란?JSON (JavaScript Object Notation)은 데이터를 교환할 때 주로 사용하는 경량의 데이터 형식이다. JSON은 텍스트 기반이며, 사람이 읽고 쓰기 쉽고, 기계가 해석하고 생성하기도 용이하다는 장점을 가지고 있다. 주로 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환을 할 때 많이 사용되는 JSON은 사람이 읽고 쓰기에 쉬운 형식을 제공하며, 자바스크립트에서 제공하는 메서드(JSON.parse(), JSON.stringify())를 사용하면 손쉽게 처리할 수 있다. JSON의 주요 특징은 경량, 텍스트 기반, 언어 독립적이라는 점이다. JSON 구조JSON은 기본적으로 키와 값 쌍으로 구성된다. 각 값은 문자열, 숫자..

export와 importES6(ECMAScript 2015)에서 도입된 모듈 시스템의 기능으로, 코드를 여러 파일로 나누어 재사용성과 유지보수를 개선하기 위해 사용한다. 이를 통해 한 파일에서 정의된 함수, 객체, 클래스 등을 다른 파일에서 사용할 수 있다.  export로 내보내기사용방법은 선언부 앞에 export 붙이면 된다. 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다.// data.jsexport const questions = [ { number: '01', question: '곧 크리스마스! 회사에서 크리스마스 파티 스텝을 모집한다는데?', choices: [ { text: '파티 스텝은 못하지ㅎ...(그래도 파티는 재밌겠다 ..

Position 개념 정리position은 HTML 요소의 위치를 지정하는 방법을 정의한다. 이 속성은 요소를 문서 내에서 배치하는 방식을 제어한다. 요소의 정확한 위치를 지정하기 위해서 top, right, bottom, left 와 함께 사용된다. static: 기본 값relative: 다른 요소와의 상대적 배치를 조정할 때 사용.absolute: 팝업 메뉴, 툴팁, 모달 창처럼 특정 위치에 고정된 요소를 만들 때 사용.fixed: 고정된 헤더나 푸터, 항상 보이는 버튼을 만들 때 사용.sticky: 스크롤 위치에 따라 고정되는 내비게이션 바를 만들 때 사용.  static (기본값)position을 지정하지 않으면 기본적으로 static이 적용되어 있다. 요소의 기본 위치는 문서의 흐름에 따라 배치..

GET 방식과 POST 방식브라우저와 서버간에 주고받는 주요 요청방식이다. Http 프로토콜이 제공해주는 7가지 메서드들 중 웹서비스 개발에 주로 사용하는 방식이다.   GET 방식GET 요청은 서버에서 데이터를 요청할 때, 주로 웹 페이지나 API 데이터를 가져오는 데 사용된다. GET 방식은 URL 뒤에 파라미터를 추가하여 전달하는 방식이다. url에 데이터가 노출되기 때문에 보안성이 낮고 브라우저에 자동으로 캐싱된다. 따라서 GET 방식은 사용자가 입력한 정보가 노출되어도 상관없을 때 사용한다. GET 방식을 사용하는 이유데이터 조회에 적합하다.GET 방식은 서버에서 데이터를 가져오는데 최적화 되어있다. 서버의 상태를 변경하지 않고, 데이터를 안전하게 읽을 수 있다. 그래서 사이트 내에서 검..