박재형 / IT 개발 공부

가. 예외처리용 컴포넌트 작성    ==> 예외발생시 랜더링됨   export  function ResponseError( ){     return (         //예외메세지  );} import logo from './logo.svg';import './App.css';import {useEffect, useState } from 'react';import UserList from './components/UserList';import { fetchUserList } from './http/HttpService';import ResponeError from './components/ResponseError';function App() {  const [userList, SetUserList] = ..

- async/await fetch 함수 ==> JS에서 기본적으로 제공하는 함수- 나는 fetch로 연동할예정 - 외부 라이브러리 ==> axios   npm install axios   fetch 사용

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는 변경이 가능하고 변경이 되면 자동 재랜더링이 된다. (***************)       ..

https://replit.com/~ Sign UpBuild and deploy software collaboratively with the power of AI without spending a second on setup.replit.com집에서 코딩 해보고 싶은데 설치가 귀찮으면 여기서 하면됨  React 강의 정리 1. 컴포넌트 박스가 만들어짐 근데 박스를 여러개 만드려면 같은 코드를 여러번 써야하고 코드가 너무 길어짐  그래서 코드의 간결함을 위해 컴포넌트라는 걸 사용함 component로 Box.js를 만들고Box.js 안에 박스를 만듬export로 Box를 내보내고와꾸(화면)인 App.js에서 import해서 받아서 씀Box.js의 모든 내용이 에 담겨버림  2. props 컴포넌트에 다이..