<zinny/>

const testText = " 첫번째 줄 테스트중요한 부분입니다. 두번째 테스트 에는 중요한게 없습니다. 중요한 것은 아무것도 없습니다 " 작업을 하다보니 문자열에 html이 들어오는 경우가 종종 있다 dangerouslySetInnerHTML을 사용 하면 손쉽게 html을 렌더링 할 수 가 있는데 __html을 사용해서 문자열을 넣어주면 html이 렌더링이 된다. 하지만 프론트 개발자는 들어온 html에 스타일을 적용해야 하는데 나는 emottion styled를 이용해보도록 하겠다! const Contents = styled.div` ol { display: grid; row-gap: 4px; counter-reset: number 0; } li { display: flex; column-gap:..

불변성 : 값이나 상태를 변경하지 않는 것??? 이해가 안 되니 일단 마저 읽어보시죠 1. 효과적인 상태 업데이트 리액트의 상태 업데이트에 대한 기본 원리 부모 컴포넌트가 리렌더링을 하면 자식 컴포넌트도 리 렌더링 하게 되며, 객체의 속성 하나하나를 비교하는 것이 아니라 참조값만 비교하여 상태 변화를 감지한다. 만약에 불변성을 지키지 않는다면 상태 변화를 감지할 수가 없을 것이다! 그래서 원본 데이터를 직접 수정하는 것이 아니라 복사본을 만들어서 사용한다 즉 얕은 비교를 실행하여 성능 최적화를 만들어내게 된다! 2. 사이드 이펙트 방지 원시 타입은 불변성의 특징을 가지고 있지만, 참조 타입인 경우 새로운 값을 변경할 때 원본 데이터가 변경된다(즉 불변성이 지켜지지 않는다) 원본 데이터가 변경될 경우 데이..

import React, { useState } from "react"; import styled from "styled-components"; import { AiOutlineDown } from "react-icons/ai"; import { AiOutlineUp } from "react-icons/ai"; const Dropdown = () => { const List = [ { name: '토마토' }, { name: '고구마' }, { name: '감자' }, { name: '오이*극혐' }, { name: '구황작물조아' }, ] //드롭여부 확인 const [isActive, setIsActive] = useState(false); const [category, setCategory] = u..

import React, { useEffect, useState } from "react"; import styled from "styled-components"; import { AiFillEye } from "react-icons/ai"; import { AiFillEyeInvisible } from "react-icons/ai"; import { AiFillCheckCircle } from "react-icons/ai"; import { AiOutlineCheckCircle } from "react-icons/ai"; const Input = () => { const [pw, setPw] = useState({ type: "password", value: false, }); const [cid, s..

리액트로 작업을 하다보면 react-dev-tool를 쓰게 되는데 여기서 redux의 전체적인 데이터 구조가 다 보인다 => 데이터를 조작할수 있기 때문에 개발환경과 배포환경을 구분하는 것이 필욥!!!! configureStore.js import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; //미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다. import { createBrowserHistory } from 'history'; import { connectRouter } from 'connected-react-router'; import Us..

더 자세한 내용은 공식문서 확인! React Router 버전을 업데이트함으로써 번들 크기 최적화가 가능하다고 합니다 :) 70% 정도 줄어든대용 0. React v16.8 React Router v6은 React Hook을 많이 사용하므로 React Router v6으로 업그레이드를 시도하기 전에 React 16.8 이상에 있어야 합니다. 좋은 소식은 React Router v5가 React >= 15와 호환된다는 것입니다. 따라서 v5(또는 v4)를 사용 중이라면 라우터 코드를 건드리지 않고도 React를 업그레이드할 수 있어야 합니다. React 16.8로 업그레이드했으면 앱을 배포해야 합니다. 그런 다음 나중에 다시 돌아와서 중단한 부분부터 다시 시작할 수 있습니다. React Router v6 ..