개발자.. 너란놈..

React 에서 이미지가 출력 되지 않을 경우 아래와 같이 Error 구문에 특정 이미지를 기본적으로 Defualt 할 수 있다.

<img src={`http://farm${item.farm}.staticflickr.com/${item.server}/buddyicons/${item.owner}.jpg`} alt={item.owner}
onError={(e) => e.target.setAttribute('src', '이미지 명')}/>

※ useHistory
- push : location.href 처럼 페이지를 이동 할 수 있다.
          EX) history.push('/Departure'); 
- goBack : 뒤로가기를 할 수 있다. 
          EX) history.goBack();

- input에다가 쓸 수 있고, 값이 변경 될 때 마다 무언가를 호출 할 수 있게 하는 속성
EX) 사용법

const handleChange = (e) => {
    const { name, value } = e.target;
    //기존 초기 Val State 값을 deep copy해서 현재 입력하고 있는 항목의 name값과 value값으로 기존 State를 덮어쓰기 해서 변경 (불변성 유지)
    setVal({ ...Val, [name]: value });
};

<input type='text' name='userid' id='userid' placeholder='아이디를 입력하세요' onChange={handleChange} value={Val.userid} />

1. npm install gh-pages --save-dev
          - 터미널에 명령어를 입력
2. "homepage": "https://dcodelabTutor.github.io/react_page",
         - Package.json 맨 위에 homepage 입력 (내 git 페이지)
3. "predeploy": "npm run build", "deploy": "gh-pages -d build"
         - package.json 아래 "Scripts"부분에 다음의 명령어 추가
4. npm run deploy
         - 터미널에 명령어를 입력
5. git -> setting -> pages에 ph-pages가 있는지 확인

※local Storage
    - 각 브라우저 마다 가지고 있는 로컬 저장 공간
    - 문자값만 저장 가능 (문자가 아닌 데이터는 강제로 문자화 시켜서 저장 JSON)
    - 5MB 저장 가능
    - localStorage.setItem ({key : 'value}) : 값 저장
    - localStorage.getItem (key) : 값 불러오기

localStorage.setItem('Key값', 'Value값');
localStorage.getItem('Key값');

- window 객체에 이벤트를 연결하면 다른 서브페이지의 컴포넌트에서도 동일하게 함수호출되므로 에러 발생
- 해당 컴포넌트가 unmount시 무조건 window 전역 객체에 연결되어 있는 이벤트 핸들러 함수 제거
- 이때 removeEventListener로 핸들러 함수를 제거하기 위해서는 해당 함수가 외부 함수로 선언 되어 있어야 가능

useEffect(() => {
		window.addEventListener('resize', 특정함수 호출);
		window.addEventListener('scroll', 특정함수 호출);
		window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

		return () => {
			//윈도우 객체에 이벤트 연결하면 다른 서브페이지의 컴포넌트에서도 동일하게 함수호출되므로 에러 발생
			//해당 컴포넌트가 unmount시 무조건 window전역객체에 연결되어 있는 이벤트 핸들러 함수 제거
			//이때 removeEventListener로 핸들러 함수를 제거하기 위해서는 해당 함수로 외부로 함수로 선언되어 있어야가능
			window.removeEventListener('resize', 특정함수 호출);
			window.removeEventListener('scroll', 특정함수 호출);
			window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
		};
	}, []);

- 변수 || 'default' -> 변수 값이 false로 인식되는 것이 들어왔을 때 찍히게 해준다 (0 같은거)
- 변수 ?? 'default' -> 변수 값이 무조건 boolean 형태의 false가 들어왔을 때 찍히게 해준다

※ forwardRef

- 자식 컴포넌트 요소를 호출하는 부모 컴포넌트에 역으로 참조해서 전달
   사용법)
     const Modal = forwradRef((props, ref) => {
        return (
          <aside className='modal' ref={ref}>
            <div className='con'></div>
            <span className='close'>close</span>
          </aside>
        );
     });

※ useImperativeHandle

- 자식 컴포넌트가 아닌 특정 커스텀 객체를 부모로 전달
- forwardRef 안쪽에서만 활용 가능
     사용법) ref는 부모쪽에 보내는 것
         useImperativeHandle(ref, () => {
             return { Open: () => setOpen(true) };
         });

※ optional chaining - 옵셔널체이닝 (객체에서만 사용 가능)

- 첫 렌더링 싸이클에서는 Vids[0]의 객체 값 자체가 없음으로 없는 요소의 id값 호출 시 오류가 되니 객체 값 자체가 없으면 skip 되게 함
     사용법) '?'를 쓰면 됨
         <iframe title={Vids[0]?.id} src={` https://www.youtube.com/embed/$ {Vids[0]?.snippet.resourceId.videoId}`}></iframe>
     - 객체에서만 사용 할 수 있다.