개발/react14 react modal 코드 실행 시점, child content 마운트/언마운트 시점 react modal 코드 실행 시점, child content 마운트/언마운트 시점 react modal 설명 modal은 다른 페이지 등으로 이동없이 현재 페이지에서 새로운 컨텐츠를 보여줄 수 있는 UI 요소입니다. react lifecycle 1. Mounting phase : element가 가장 처음 렌더링되는 단계 : DOM에 새로운 element 생성 2. Updating phase : 마운트된 element가 업데이트되는 단계 : DOM은 그대로 3. Unmounting phase : 마운트된 element가 DOM에서 제거되는 단계 : DOM에 element 제거 DOM : Document Object Model, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도.. 2023. 5. 30. react TextField setState 이후 바뀌지 않을 때 (재렌더링 안됨) 에러 내용 react의 material ui의 TextField에서 setState를 해도 관련된 요소가 변경되지 않습니다. 에러 원인 컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링 된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정합니다. 같지 않을 경우 React는 DOM을 업데이트합니다. -react 공식 홈페이지- react는 setState로 인해 요소를 업데이트를 해야 할 때 성능최적화를 위해 virtual DOM을 사용합니다. 이는 state가 바뀐 전과 후의 요소를 비교하여 다른 부분을 부분적으로 제렌더링 합니다. 그런데 이러한 "비교"할 때 그리 엄격하게 비교하지 않습니다. state를 직접적인 텍스트로 사용하거나 map을 .. 2023. 2. 15. material ui TextField disabled 색 바꾸기 설명 material ui TextField가 disabled일 때 회색이 되는데 이때 색을 바꾸는 방법입니다. 해결방법 TextField를 다음과 같이 수정합니다. 그 외 다른 Component Style Custom TextField 외에도 다양한 Component를 custom 할 수 있습니다. TextField처럼 특정 Props를 통해 custom 할 수 있지만, 모든 Component가 위와 같은 방식으로 custom이 가능하지는 않습니다. 자세한 custom 방법은 아래의 material ui 홈페이지에 기술되어 있습니다. How to customize - Material UI Learn how to customize Material UI components by taking advantag.. 2023. 1. 27. react url 파라미터 여러 개 받기 설명 react에서 url로 파라미터 받는 방법입니다. (여러 개) (예 : /url/:parameter) create-react-app으로 코드의 기본 틀이 만들어져 있다고 가정합니다. react url 파라미터 여러 개 받는 방법 router를 사용하고 Route의 path에 url/:파라미터 이름 를 설정하고 useParams()로 가져옵니다. 1. react-router-dom, react-dom을 설치합니다. npm i react-router-dom react-dom 2. src/index.js를 다음과 같이 수정합니다. import React from "react"; import { createRoot } from "react-dom/client"; import Router from "./Ro.. 2022. 12. 9. react build 이번 포스팅에서는 react 최적화 방법 중 하나인 build에 대해서 다루고자 합니다. Production Build? 여기서 build는 production build입니다. (client에서 실행되는 프로그램을 build 합니다.) 컴퓨터 언어는 크게 두 가지로 나눌 수 있습니다. 인터프리터 언어와 컴파일 언어입니다. (물론 하이브리드 등 세부 분류가 있지만..) 그리고 우리가 쓰고 있는 JS는 인터프리터 언어입니다. 인터프리터 언어의 기본 concept는 source code를 interpreter로 바로 실행하는 것입니다. 그와 반대로 컴파일 언어는 source code를 compile 하여 object file 또는 immediate code 등을 만든 후 그것을 실행합니다. 그런데 인터프리터.. 2021. 3. 29. react fragment 이번 포스팅에서는 react의 Fragment에 대해 간단히 이야기하고자 합니다. React Fragment ko.react.org에서는 react fragment를 다음과 같이 설명하고 있습니다. React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴입니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다. React Fragment는 컴포넌트가 여러 엘리먼트를 반환해야 할 때 등의 다른 태그로 감싸지 않고 엘리먼트를 반환합니다. 렌더링 시에도 반환된 그 여러 태그들은 따위로 감싸져 있지 않습니다. Fragment를 적절히 사용하면 불필요한 태그를 제거할 수 있습니다. 또 table의 column 등을 추출하여 컴포넌트로 만들수 있습니다. 다음 코드.. 2021. 3. 29. 이전 1 2 3 다음
