박재형 / IT 개발 공부

clean up - return cleanup 기능함수;- cleanup 함수는 맨 처음 실행될 때 실행안됨  다음 부수함수가 실행되고 실행된다

1) 개요현재 랜더링되는 기본적인 프로세스에 영향을 미치지 않는 특별한 기능처리 담당 useEffect는 보통초기화closecleanup 작업으로 주로 사용 2) 문법   import { useEffect } from 'react';    useEffect( 함수 , [변수값] | [ ] );  -> return이 없음 없으면 app가 재랜더링 될때마다 실행채워져있으면  state(변수)가 변경될때마다 실행 3) 옵션에 따른 실행   -  옵션이 없는 경우       [ ] : 부수함수가 단 한번 실행       [state] : state가 변경되면 부수함수가 재 실행됨       [ ] 지정안함: App가 재랜더링 될 때 부수함수가 재 실행됨  실습 App이 먼저 실행되고 useEffect가 실행

https://react.dev/reference/react/useContext 1) 개요모든 컴포넌트가 꺼내 쓸 수 있는 저장소를 만들어놓고 여기 최상위에서 바로 꺼내 쓰도록 하는게 Context   - prop drilling 현상 방지  - lifting state up 패턴 기반 2) 구현#부모작업 import { createContext, useState } from 'react';   - 저장소 생성 ( Context 이름은 대문자 )     const UserContext = createContext(기본값);  //컴포넌트 형태로 사용됨   - state 생성     const [ name, setName ] = useState('박재형');   - 자식컴포넌트가 사용할 수 있도록 설정  ..

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog: 대화 상자 요소 - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog" data-og-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog" ..

1) 개요  - 일반적으로 JSX 참조할 때 사용됨  - 드물지만 일반값 저장도 가능  - 말그대로 저장용도로만 사용, UI에 반영 안됌 2) 사용방법  가. import        import {useRef} from 'react';   나. useRef 사용        let xxx = useRef(기본값);    다. JSX에 ref 설정       ex>                           xxx} />    라. JSX 접근 방법      xxx.current 속성으로 참조 가능   3) 부모에서 자식을 참조 가능    https://react.dev/reference/react/forwardRef     ref는 속성이지만 props로 안넘어간다 -      넘길려면 추가 작업을..

1) 개요    이전에는 클래스에서만 사용할 수 있는 기능이 있었음   따라서 함수에서만 사용할 수 없었기 때문에 클래스 컴포넌트가 많이 사용되었음   React 16.8 이후부터는 클래스에서만 사용했던 기능을 함수에서도 사용할 수 있도록 지원   2) 종류 - useState - useRef - useEffect - useContext - useMemo - useCallback 주의할 점은 반드시 최상위 함수(컴포넌트)에서만 사용일반 함수, 반복문, 조건문 등에서는 사용 불가 13. 상태값(state) 관리   1) 개요       props는 자식이 변경 불가. readonly 특성       state는 변경이 가능하고 변경이 되면 자동 재랜더링이 된다. (***************)       ..

React에서 반복문은 map을 많이 쓴다

1) 개요  - 이벤트 핸들러 (이벤트함수)는 함수 컴포넌트 안에서 정의함             //함수 컴포넌트  ex> function App() {       // 이벤트 함수      function go( ){ }        return (           JSX);}; - JSX에서 이벤트 처리는 카멜표기법(onClick, onChange) 을 사용- 기본문법  onClick={이벤트함수명}    onClick={go}     onClick={arrow함수}      onClick={( )=>go( 값 )} 기본 문법 -명시적으로 함수 호출- 이벤트 객체는 자동으로 전달 안됨. 명시적으로 전달해야 된다.ex>   2) 이벤트 객체 사용 가능  - e.preventDefault( );  - ..