React6 [React] useEffect의 생명주기 😀 Effect의 생명주기 - componentDidMount : 컴포넌트가 생성될 때 - componentDidUpdate: 컴포넌트가 리렌더링될 때 - componentWillUnmount: 컴포넌트가 화면에서 제거되었을때 모든 React 구성 요소는 위의 동일한 생명주기를 거친다. - 구성요소가 화면에 추가되면 마운트 된다. - 새로운 상태 변경시, 업데이트된다. - 구성요소가 화면에 제거되면 마운트 해제 된다. const serverUrl = 'https://localhost:1234'; function ChatRoom({ roomId }) { useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.c.. 2023. 9. 28. [React] 불필요한 useEffect 사용예시 - 참고용 https://react.dev/learn/you-might-not-need-an-effect You Might Not Need an Effect – React The library for web and native user interfaces react.dev 2023. 9. 21. [React] Hooks 😀 Hooks DOC https://react.dev/reference/react Built-in React Hooks – React The library for web and native user interfaces react.dev 😀 useCallback https://react.dev/reference/react/useCallback useCallback – React The library for web and native user interfaces react.dev const cachedFn = useCallback(fn, dependencies); 😀 useState https://react.dev/reference/react/useState useState – React The librar.. 2023. 9. 21. [React] useEffect useEffect import { useEffect } from 'react'; function MyComponent() { useEffect(() => { // Code here will run after *every* render }); return ; } 구성 요소가 렌더링될 때마다 React는 화면을 업데이트 한 다음 내부의 코드를 실행한다. React에서 렌더링은 JSX의 순수한 계산이어야 하며, DOM 수정과 같은 부작용을 포함해선 안된다. 렌더링 중에 DOM 노드로 작업을 시도하기 떄문에 아래의 코드는 문제가된다. * JSX 순수한 계산 : https://react.dev/learn/keeping-components-pure : 순수 함수는 계산만 수행하며 그 이상은 수행하지 않는다. 구성 .. 2023. 9. 21. 이전 1 2 다음
