개발자.. 너란놈..

※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>
     - 객체에서만 사용 할 수 있다.

※ component children

- component 참조를 한 사이에 HTML 데이터들은 그대로 사용 할 수 없다.
- 참조 당한 component에는 children이라는 예약어가 생기고 그걸 component에 위치시켜야지만 사용 가능 하다. 
EX)        

function Department() {
     return (
         <Layout name={'Department'}>
         ★★★<p>회사 조직소개 페이지 입니다.</p>★★★ 여기가 바로 children 부분
         </Layout>
     );
}

function Layout({ name, ★★★children★★★ }) {
    return (
        <section className={`content ${name}`}>
            <figure></figure>

            <div className='inner'>
            <h1>{name}</h1>
            ★★★{children}★★★
            </div>
        </section>
    );
}

☆주의사항 : Children과 children은 다름 (children으로 사용하여야 함) 

※ react-router-dom

- Component를 나누기 위해서 사용한다
     1. 보여야되는 component를 Route로 감싼다
     2. Path를 통해서 URL이 바뀌는것에 따라서 보여진다.
     3. 원하지 않으면 속성에 exact를 추가한다.
EX) 

     <Route exact path='/'>
     <Visual />
     </Route>

※ react-router-dom (Link , NavLink)

Link - 기본 링크 기능 
NavLink - 기본 링크 기능 + 활성화 기능

☆속성에 to는 필수 값 (path 값임)

※ NavLink

to 속성을 이용하여 Path 설정을 할 수 있다.
activeStyle 속성을 이용하여 선택 되었을 때 style을 변경 할 수 있다.
activeClassName 속성을 이용하여 선택 하면 class를 넣을 수 있다.

※ Switch 

- 내부에 중복되는 라우트 경로가 있을 때 더 구체적인 라우터를 채택하고 나머지는 무시

※ useRef

- 가상돔 요소가 담길 빈 참조객체
- 참조하고 있는 가상돔요소를 useRef로 만든 참조 객체와 연결
     EX) <article ref={article}></article>

- const 변수 = useRef(초기값) 
- 변수에는 useRef의 초기값을 활용해서 빈 참조객체가 생성 됨.
- 해당 객체안에는 current키 값이 자동생성 되면서 초기값이 담김
- 빈 참조객체를 원하는 가상돔 요소에 ref속성을 지정해서 참조 가능
- 참조된 가상요소는 이벤트 발생시 자유롭게 호출 가능
- useRef는 보통 이벤트 연결 시 제어해야 되는 가상돔을 참조할 때 주로 쓰임

- 사용 순서
     1. 변수에 useRef(null)을 대입해서 일단 빈 참조객체 생성
     2. 원하는 가상돔 요소에 ref={참조객체}로 연결
     3. 참조객체명.current형식으로 참조된 가상돔 요소를 자유롭게 호출

- useRef의 다른 사용 예 (useState를 쓰면 새로고침 처럼 되니까 전역변수처럼 쓰고싶으면 useRef를 써야된다는 뜻)
- component 안쪽에서 측정 값을 변경하고 싶은데 해당 값 변경시 component를 재호출 하고 싶지 않을 때
- component가 다른 state에 의해서 재호출 되더라도 특정 값을 초기화시키고 싶지 않을 때

- App Component가 호출되고 나서 return에 적히는 html이 생기기 때문에 document.querySelector로 찾을 수가 없다.
- React Component 안쪽에서는 document.querySelector문을 가급적 쓰면 안됨.
- 현재 React에서 관리되고 있는 가상돔을 제어하는 것이 아닌 제어가 불가능한 리얼돔을 가져오기 때문
- DOM을 계속 변경 시키기 때문에 원하는 DOM을 선택하지 않을 수도 있기 떄문에 권장하지는 않고 useRef를 쓰기를 권장함