Suyeon BLOG

Redux를 사용하다가 해당 에러가 발생해서 해결방안을 기록합니다! 📌에러 발생 원인 데이터를 화면에 표시할 때, 컴포넌트로 전달된 데이터 타입과 표시하려는 데이터 타입이 일치하지 않을 때 📌오류 찾는 방법 The above error occurred in the component: 라는 오류를 더 찾아볼 수 있습니다. 바로 에서 데이터 타입이 일치하지 않는다는 의미인 것 같습니다. 저는 span에 표시한 데이터를 console.log로 확인해서 어떤 타입이 들어가 있는지 확인했습니다. 📌오류 해결 방법 console.log로 확인해본 결과 아래와 같은 배열이 나왔습니다. {type: 'login/changeNick', payload: ''} redux를 활용해서 state의 값을 변경하는데 어떤 인자를..

채팅 기능을 만들었는데 다른 채팅창을 켰을 때 그 전에 거가 다 남아있거나 똑같은 채팅창에서 해도 중복으로 저장이 돼서 이 문제점을 해결한 방법을 기록하고자 작성합니다! 📌코드 해석 ※ () 안에 적힌 것은 식별자명입니다 1. 채팅하기 버튼을 눌렀을 때 해당 유저 프로필사진, 글의 제목, 글쓴이, 글의 종류, 채팅내용을 저장하는 state(msg)를 만들어서 우선 프로필사진, 제목, 글쓴이, 종류를 저장합니다. 2. input 안에 사용자가 입력한 글을 msg에 저장합니다. 2-1. 이때 채팅 기록 전체를 관리하는 state(chat)에 현재 글제목이 있으면 그 요소 안에 채팅을 추가합니다. 2-2. 그렇지 않으면 msg에 저장합니다. 3. 채팅 닫기 버튼을 눌렀을 때 msg에 저장된 데이터를 chat에..

사용자가 입력한 채팅을 저장하는 방법과 화면에 보여주는 방법을 기록하면 나중에 유용하게 사용될 것 같아 이렇게 글을 작성하게 되었습니다. 📌 코드 해석 1. handleChatInput: input의 폼이 변경된 값을 저장하는 역할을 합니다. 2. handleSubmitBtn: 전송 버튼을 눌렀을 때 input의 변경된 값을 chat이라는 state에 저장하고, input을 초기화시켜주는 역할을 수행합니다. 3. ShowChatList(): 사용자가 입력한 메시지를 출력해주는 역할을 하는 컴포넌트 입니다. chat이라는 state를 전달받습니다. function ShowChat({data, setChatBtn}) { let [text, setText] = useState(''); let [chat, se..

채팅창을 구현할 때 날짜를 가져와야하는데 이때 사용한게 react-live-clock 입니다. 📌 react-live-clock 사용방법 1. 터미널에 npm install --save react-live-clock 을 입력해서 설치합니다. 2. 코드 상단 위에 import Clock from 'react-live-clock'; 으로 시간 컴포넌트를 생성합니다. 3. 코드 형식은 이렇게 작성합니다. ※ timezone은 여기를 참고해주세요! 결과 import Clock from 'react-live-clock'; function Chat() { return( ); } export default Chat;

프로젝트를 하다가 이런 에러가 발생했는데 프로젝트 실행하는데 문제가 없어서 신경 안쓰고 있다가(😅) 찾아보니 해당 문제되는 state 부분을 useEffect()로 묶어줘야 한다는 걸 알게 되었습니다. 제 코드에서 에러가 발생한 부분입니다. function ShowContent({data, setData, mark, setMark, setChatBtn}) { let [heartBtn, setHeartBtn] = useState(false); setData(data); // { setData(data); }); ... } 사실 아직 왜 이런 문제가 발생했고 useEffect()를 사용했을 때 해결이 되는지 잘 이해가 되지 않습니다. 그래서 관련된 서적을 찾아보고 반드시 이해해서 이 포스트를 수정할 겁니다!

어떤 버튼을 눌렀을 때 관련된 내용만 보여주고 싶을 때 useState()를 사용하면 쉽게 구현할 수 있습니다. 📌 useState()가 무엇이고 언제 사용하는가? 1. 자료를 저장하는 역할을 합니다. 2. 자주 변경되는 자료를 저장할 때 사용합니다. 📌 코드 설명 - 탭을 눌렀을 때 state가 변경되고, 변경된 state를 페이지를 출력하는 컴포넌트에 전달해서 관련된 내용만 보이도록 했습니다. import { useState } from 'react'; // Detail에 관련된 자료가 저장된 파일입니다. import {food, product, book} from 'Detail-data'; function Detail() { let[tab, setTab] = useState('food'); retu..

프로젝트를 만들던 도중 내용만 다르고 똑같은 페이지를 여러 개를 보여줘야 하는데 이때 유용하게 사용할 수 있는 :URL 파라미터에 대해서 알아보겠습니다. 📌언제 사용하기에 적당한가? 1. 한 페이지에서 내용만 달라지고 비슷한 의미를 전달하는 페이지가 여러 개 일 때 2. 페이지가 너무 많을 때 📌어떻게 사용할 수 있는가? // Detail-data.js let data = [ { id: 0, url: '/share-application/one-serving/0', img: '/public-assets/one-serving/ramen.jpg', img_alt: 'ramen', kind: '라면', name: '차슈라면 만들어주세요', content: '차슈라면이 너무 먹고싶어요.. 혹시 차슈라면 할 수 있..

사이드 메뉴를 만들고 있는데 누른 메뉴에만 색상이 변했으면 좋겠는데 어떻게 하면 깔끔하게 할 수 있는지 인터넷과 책을 찾아본 결과 useState를 활용하면 된다는 것을 알아냈습니다. let [click, setClick] = useState('home'); return( { setClick('home'); }}> 홈 { setClick('recipe'); }}> 레시피 ); Link를 누를 때마다 state의 값을 변경합니다. 그래서 state 값이 맞는 태그에만 색상이 있는 사진과 글씨를 적용합니다.

React로 프로젝트를 만들던 도중에 style을 준 적이 없는데 이상하게 화면이 보인 적이 있었습니다. 찾아보니 컴포넌트끼리 같은 클래스명을 사용하면 충돌이 일어난다고 하네요.. 그래서 이를 해결할 방법을 찾아보니 css-module을 사용하면 충돌을 막을 수 있다고 합니다!! css-module 사용하기 /* 주의!! */ /* React에서 css-module을 사용할 땐, 클래스명을 abc-efg 하면 안되고 abcEfg 로 지어야 오류가 안 생긴다. */ .itemsList { background-color: #E67E22; margin: 0 auto; } .item { color: #ffffff; font-size: 18px; } import style from './style.css'; fu..

프로젝트를 만들던 도중 드랍 다운 메뉴를 만들어야 하는데 많은 예제들을 참고 하다가 제일 간단한 방법을 찾은 것 같습니다. 저는 이렇게 코드를 작성했습니다. import {useState} from 'react'; import {Routes, Route, Link} from 'react-router-dom'; function App() { let [isOpen, setIsOpen] = useState(false); return( { setIsOpen(!isOpen); }}> 메뉴 검색 ); } function Sidebar(props) { let isOpen; if(!props.isOpen) { isOpen = 'hide-sidebar'; } else { isOpen = 'hide-sidebar show..