반응형 react12 [React 오류] A component is contentEditable and contains children managed by React 😮 문제 상황 index.js:1 Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional. div contentEditable 내부에 component를 넣으니 React 오류 발생 아래와 같은 형태 import React, { ReactElement } from "react"; function TestComponent ({children}):ReactElement{ .. 2022. 6. 28. input 관련 이벤트 파헤치기 - input onChange onKeyUp onKeydown 회사에서 value에 따라 style이 변경해야 하는 기능을 가진 input을 만들어야 했는데, input event를 활용해서 해당 문제를 해결할 수 있었는데요. 정확히 왜 해결되었는지 원론적으로 접근해보고 싶어서 공부한 내용을 적었습니다. input event에 대한 내용은 김맥스 기술 블로그- input 요소 관련 키보드 이벤트 총정리 를 활용했는데 정말 정리가 너무 잘되어있습니다. 김맥스님 감사해요❤️ 사용 기술 스택 React 에 antd textarea사용 code sand box 예시에서는 일반 input과 textarea에 이벤트를 걸어보았습니다. input의 이벤트 onBlur 요소에 focus가 헤재되었을 때 발생하는 이벤트 onFocus 요소에 focus시 발생하는 이벤트 onKeyP.. 2022. 6. 1. [React] sticky Header CSS가 변하는 sticky Header 만들기와 최적화 여러 웹사이트에서는 scroll과 관계없이 상단에 붙어있는 sticky header를 자주 사용하고 있는데요, 아래 예시와 같이 특정 영역에서 css가 바뀔 수 있는 header를 만들어 보겠습니다. ⚙️ 사용 스택 : React, emotion/css 📌 기본 구조 생성하기 헤더는 공통적으로 사용할 가능성이 높기 때문에 Header로 분리했습니다. App.js import { css } from "@emotion/react"; import Header from "./Header.jsx"; export default function App() { return ( ); } const wrapStyle = css` `; Header.jsx import { css } from "@emotion/react"; .. 2022. 5. 17. React로 Slider 구현 & React에서 Canvas로 곡선 그래프 그리기 (+globalCompositeOperation ) Jenny와 airbnb사이트 프로젝트를 진행하며 요금부분의 그래프를 구현한 내용입니다. 무엇보다도 canvas와 slider구현을 위한 엄청난 수학적 계산을 해주신 Jenny에게 이글을 바칩니다.. 🌹 폴더 구조는 이렇게 되어있는데 아래 Slider 과 ChartCanvas로 나눠서 구성했다. 📈 Slider Slider에는 총 2개의 상태가 있다. const { priceData, priceDispatch } = useContext(SearchContext); const [avg, setAvg] = useState((min + max) / 2); const [min, max] = [0, 1000000]; priceData : slider 가 가리키는 min,max 값 / useContext로 관리 a.. 2021. 6. 2. [React] ReactHooks & Context API 를 이용한 state 관리 ( VS Redux) 📌 React의 상태관리는 어떻게 진행되고 있었나? React 에서 서로 다른 component를 연결하는 방법은 props drilling 이다 . top레벨의 components에서 bottom레벨의 components 에겟 속성을 전달해야 한다. < 실제 TodoList 프로젝트 당시 props drilling 상황 Atomic design 패턴을 고려하여 만든 프로젝트를 진행할 당시 * TodoList Column을 누르면 popup이 나오고 * 그 안 (의안의안)의 Buton을 누르면 popup이 닫히는 동작을 작동시킬때 popup state를 끌고끌고 들어가야 했다... 이걸 해결하기 위해서는⭐️ global state가 모든 components에게 존재해야 한다. 그 깊이가 깊든 관계가 복잡.. 2021. 5. 4. [React] CRA로 프로젝트 초기 세팅 create react app CRA 설치 //npx create-react-app {프로젝트파일명} npx create-react-app movie_app https://rrecoder.tistory.com/96?category=955706 React 리액트란, 리액트 작업환경 설정 사람들이 좋아하고, 인기있고 , 간편한 프레임워크! 자바스크립트 기반이기때문에 배우는데도 부담이 없다. 리액트를 익혀보고 직접 사용해보기 위해 노마드코더의 ReactJS 로 영화 웹서비스 만 rrecoder.tistory.com 이렇게 설치를 하면 사용하지 안아도 될 파일과 디렉토리가 넘친다. 나의 새로운 프로젝트를 위해 지워도 될 파일들을 싸그리 지워보자!! 1️⃣ 삭제 1️⃣- 1 ) 파일 삭제 초기 상황 이렇게 파일들.. 2021. 4. 11. [React] React 의 특징, JSX 이해하기 CSR 클라이언트 사이드 렌더링 data(json)가져와 클라이언트에서 렌더링 하여 결과 보여줌 json데이터만 받아와서 클라이언트 렌더링 하여라 SSR 서버 사이드렌더링 누르면 페이지 새로고침 ( 페이지 이동) html 파일을 가져와서 서버에서 새로 렌더링 📌 SPA ( Single Page Application ) 한 single page에서 데이터 변화가 다 이루어지도록 만든 페이지 새로고침 없이 빠르게 대응하도록 만듦 백엔드 API 제공 -> 클라이언트 template 작업 -> 렌더링 클라이언트에서 data들을 파싱하면서 JS가 복잡해졌다. 많은 모듈들을 어떻게 객체지향형으로 만들까? 그 중에 비동기 이벤트 처리도 완료해야 함 SPA를 위해 필요한 기술 라우팅 클라이언트 사이드 렌더링 상태관리 .. 2021. 4. 11. ReactHooks 정복하기 1탄 ( useState, useClick ) 기본적인 구조 useHooks라는 Hook이 있을 경우 const useHooks = (initial, ~) =>{ const [ curr, setCurr ] = useState(initial, ~); return { currItem : curr, changeItem: setCurr } } const App = () =>{ const {currItem , changeItem} = useHooks(초기값); {currItem} {changeItem(0)} } 🔥 useState 🔥 useInput (초기값 , 유효검사function) input 을 넣고, 원하는 입력 조건에 해당하는 값만 받기 //useInput Hooks const useInput = (initialValue, validator) => .. 2021. 4. 6. [React] 프로젝트 GitHub Pages 배포하기 + Axios 를통해 json data 가져오기 AXIOS fetch위에 있는 작은 layer // asios 설치 npm i axios data fetch하기 보통 Fetch 를 사용하여 data를 load 하디만 asios를 사용해보자 class App extends React.Component{ state={ isLoading: true, movies:[] }; getMovies = async() =>{ const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); }; componentDidMount(){ this.getMovies(); } render(){ const {isLoading} = this.state; return ( {.. 2021. 3. 17. 이전 1 2 다음 반응형
