React : 필요 개념 정리 (1)

1. JSX란 무엇인가요? [생각] 자바스크립트 + XML을 더한 확장한 문법 [정답] + JS모든 기능이 포함되어 있고 react element를 생성하기 위한 문법 2. SPA와 MPA의 개념 및 각각의 특징 [생각] : SPA 는 단일페이지 ( 바꾸고 싶은 데이터만 가져다가 변경하기에, 깜빡임이 없음) 단점으로는 SEO 검색엔진최적화가 약하다 :MPA는 여러페이지로 구성되어 있어서 전체 리랜딩해서 깜빡임 (잘 사용하지 않음) [정답] + SPA는 단 하나의 페이지만 로딩 (서버에 index.html / index.js만 요청 & state 변경시에 필요 부분만 요청해서 동적 업데이트) + 속도: SPA 는 초기 로딩속도가 가져와야하는 리소스양이 많아서 MPA 에 비해 오래걸림 + 리액트.뷰 -> 라..

  • format_list_bulleted React
  • · 2023. 11. 14.
  • textsms
[React] 조건부 랜더링 버튼 색상 변경

[React] 조건부 랜더링 버튼 색상 변경

import React, { useState } from 'react'; import Comments from './Comments'; import styled from 'styled-components'; const StBtn = styled.button` background-color: ${(props) => props.color}; color: white; border-radius: 20px; border: none; padding: 10px 20px; margin: 10px; font-weight: 600; `; function CommentsLayout({ comments, setComments, member }) { const memberList = ['하니', '혜인', '다니엘', '해린'..

  • format_list_bulleted React
  • · 2023. 11. 13.
  • textsms

[리액트] 페이지 이동시 데이터 전달 (Router element에 props 사용)

[문제] Home.jsx에 있는 데이터를 Details.jsx에서도 사용하고 싶은데 데이터를 어떻게 가져와야할 지 모르겠음. import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Home from '../pages/Home'; import Details from '../pages/Details'; const Router = () => { return ( ); }; export default Router; [해결] Router에서 Home.jsx에서 사용하는 useState를 Router에서 사용하고 각각 props로 전달하기. import { BrowserRouter, Route, Routes } from 'react-router..

  • format_list_bulleted React
  • · 2023. 11. 13.
  • textsms
[오류] 리액트 styled-component : You may see this warning because you've called styled inside another component.

[오류] 리액트 styled-component : You may see this warning because you've called styled inside another component.

TIL ▶ styled-component는 작성 위치가 정말 중요하다 [오류 증상] styled-component를 적용시키고 나서 input 박스에 입력시 속도가 매우 느리고 포커스가 나감 [확인] 개발자도구로 확인하니 콘솔창에 해당 warning 확인 [문제 파악] 찾아보니 styled-components로 만든 요소의 선언 위치 때문이라고함! Header.jsx부분이 문제인것 같아 찾아보러감 >> 아니였음 styled component안에 직접적으로 작성한 함수가 문제였음 ▼문제 코드 ▼ import React from 'react'; import styled from 'styled-components'; function WriteComments() { const StDivWrite = styled..

  • format_list_bulleted React
  • · 2023. 11. 12.
  • textsms
[오류] 리액트 React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed

[오류] 리액트 React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed

[오류] React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed~~ [해결] App.js -> App.jsx로 변경 [참고자료] "React has detected a change in the order of Hooks" but Hooks seem to be invoked in order I am trying to use Context and Reducers via React's hooks, and running into problems with the order of the hooks not being constant. My understanding was t..

  • format_list_bulleted React
  • · 2023. 11. 12.
  • textsms
[오류] 리액트 datas is not iterableTypeError: datas is not iterable at onSubmit

[오류] 리액트 datas is not iterableTypeError: datas is not iterable at onSubmit

[원인] 자식 컴포넌트에서 매개변수를 구조분해할당으로 안 가져옴. (전) function AddMessage(datas, setData) { (변경 후) function AddMessage({datas, setData}) { 1.Home.jsx const initialState = [ { id: uuid(), name: '하니팬', content: '하니최고최고', idol: '하니' }, { id: uuid(), name: '혜린팬', content: '혜린최고최고2', idol: '혜린' }, ]; const [datas, setData] = useState(initialState); ▶ 여기에서 를 컴포넌트로 만들어서 사용하기 ▶ (기능) 댓글 남기기 기능과 유사 2. AddMessage.jsx i..

  • format_list_bulleted React
  • · 2023. 11. 11.
  • textsms