전체 글32 useEffect 정리 오늘은 함수형 컴포넌트를 사용할 때, 알아야 할 필수 개념인 useEffect 훅에 대해 정리를 해보고자 한다. useEffect에 대해 알기 전에 우리는 우선 컴포넌트의 생명주기에 대해 알아야 한다. 컴포넌트의 생명주기 우리들도 인생에서 탄생, 성장, 죽음이 있듯이, 컴포넌트에게도 생명주기라는 것이 존재한다. 컴포넌트의 생명주기는 다음과 같이 크게 3가지로 구분된다. 탄생에 해당하는 mount (페이지에 장착되는 행위) 성장(재렌더링)에 해당하는 update (컴포넌트 내용이 업데이트 되는 행위) 죽음에 해당하는 unmount (컴포넌트가 제거되는 행위) 그렇다면 컴포넌트의 생명주기를 왜 알아야 할까? 그 이유는 바로 컴포넌트의 생명주기를 알아야 컴포넌트의 인생 중간중간에 내가 원하는 효과(기능)을 집.. 2023. 6. 6. Material UI Table 사용시 유의사항 문제상황 회사에서 AgGrid와 CustomFooter 컴포넌트를 이용하여 Pagination 기능을 구현하고 있던 와중에 기능은 문제없이 잘 동작하는데, 개발자도구(F12)에 다음과 같은 Warning 메시지가 출력되는 것을 확인하였다. 기능 구현에는 문제가 전혀 없었지만 개발자에게 빨간 경고문은 절대로 넘길 수 없는 직업병 같은 것이 있기 때문에 해당 경고를 잡고자 한다. 개발자 도구 콘솔창 경고문 경고문 내용은 다음과 같다. Waring: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. 이 경고는 React에서 유효한 HT.. 2023. 5. 26. props란? 다음 코드를 실행해보자 import { useState } from 'react'; export default function App() { let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ); } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } 위 코드는 Modal 컴포넌트를 App 컴포넌트 안에 삽입하는 코드이며(이 경우, App 컴포넌트를 부모 컴포넌트, Modal 컴포넌트를 자식 컴포넌트라고 한다), 예상대로라면, 글제목[0] 부분에 '남자코트 추천'이 떠야한다. 하지만 이 코드를 실행 시켜보면 예상과는 다르게 에러가 뜬다. 에러 내용을 보자 에러를 보면 위와 같이 "글제목"이 .. 2023. 5. 26. Component란? Component란 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공하는데 이를 Component라고 한다. 이걸 이용하면 함수와 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있다. 다음은 모달창을 컴포넌트화 해서 html에 꽂아넣는 예시이다. function App (){ return ( // Modal 컴포넌트가 들어갈 곳 ) } // Modal 컴포넌트의 구조 function Modal(){ return ( 제목 날짜 상세내용 ) } 컴포넌트 만드는 법 1. function을 이용해서 함수를 하나 만들어주고 작명한다. 2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담는다. 3. 그럼 원하는 곳에서 혹은 사용하면 아까 .. 2023. 5. 26. 이전 1 2 3 4 5 6 7 8 다음 728x90
