개발자.. 너란놈..

※ useContext

  - 자식 컴포넌트의 DEVS가 많은 경우 최상위 컴포넌트에서 최하위 자식 컴포넌트까지 값을 일일이 전달하는 것이 비효율적
  - 이처럼 Prop을 통해서 중간단계의 컴포넌트들이 계속 값을 전달하는 상황 (prop Drilling)
  - 이때 Context API를 활용한 useContext hook을 활용하면 컴포넌트 외부에 전역으로 특정 값을 관리하며 자식 컴포넌트에게 바로 값 전달 가능

createContext : context 생성 후 Provider를 통해 전역으로 특정 값을 전달 가능
useContext : createContext로 생성된 값을 원하는 자식 컴포넌트에서 자유롭게 호출 가능

사용 순서)

1. 전역으로 관리할 저장객체 생성
   -  createContext를 이용해서 초기값을 null로 지정한 빈 객체를 생성
   -  해당 빈 객체는 추후 루트 컴포넌트인 App에서 Provider로 해당 값을 전역으로 자식요소에 전달

예제)

import { createContext } from 'react';
export const LoginContext = createContext(null);

2. 전역으로 생성한 빈 저장객체에 원하는 값을 저장
   -  null로 빈값이 저장되어 있는 LoginContext에 Provider로 원하는 값을 value로 지정해서 전달
   -  해당 LoginContext가 전체 컴포넌트들을 감싸고 있기 때문에 모든 자식 컴포넌트들은 추후 useContext를 이용해서 해당 값에 자유롭게 접근 가능

예제)

<LoginContext.Provider value={{ Login, setLogin }}>
  <main>
  <Header />
  <Content />
  </main>
</LoginContext.Provider>

   
3. 전역 정보값을 가져와서 로그인, 로그아웃 버튼 클릭시 해당 전역 정보값을 자유롭게 변경
   -  useContext를 이용해서 LoginContext값을 자유롭게 사용 가능

예제)

const login = useContext(LoginContext);

return (
    <article>
    <button onClick={() => login.setLogin(true)}>login</button>
    <button onClick={() => login.setLogin(false)}>logout</button>
    </article>
);

- 변수 || '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를 쓰기를 권장함

※ useEffect

- 컴포넌트의 생명주기를 관장하는 hook
- Life cycle : 생성(Mount), 변경(state change), 소멸(UnMount)
- useEffect(실행할 함수,[의존성배열])
- 기본 useEffect 사용 하는 방법
         EX) useEffect(() => {}, []);

- useEffect 생명주기

의존성 배열이 비어있으면 해당 구문은 처음 Component가 Mount 되었을 때 한번만 실행 
실제 사례) 
    1. 외부 데이터를 fetching하는 무거운 함수를 처음 한번만 호출 해야 될 때
    2. window객체에 이벤트 바인딩 할 때 (Browser Scroll , Resize 이벤트 연결 시)
사용 방법)
    //의존성 배열이 비어있는 useEffect문
    useEffect(() => {
        console.log('팝업 컴포넌트 생성');
    }, []);

의존성 배열에 특정 State가 등록되어 잇으면 해당 State가 변경될 때 마다 실행
실제 사례)
    1. 외부 fetching 데이터를 변경 할 때 마다 loading 이미지 출력 할 때

사용 방법)
//의존성배열에 특정 State 값이 등록되어 있는 useEffect문
    useEffect(() => {
         console.log('Num state값 변경');
    }, [Num]);

의존성 배열이 비어있는 상태에서 함수가 리턴되면 해당 함수는 Component가 UnMount 될때 한번만 실행
실제 사례)

1. 레이어 팝업 제거 시 부모창의 scroll bar 다시 보이게 하기

사용 방법)
    //의존성배열이 비어있는 상태에서 특정 함수가 리턴되는 useEffect문 (컴포넌트의 소멸을 캐치)
    useEffect(() => {
        return () => {
            console.log('컴포넌트 소멸');
        };
    }, [Num]);

※ useEffect에서 사용하는 지역변수를 다른 useEffect에서 사용하는 방법

- useStage를 이용하여 useEffect의 지역 변수를 넣어준다.
☆ 주의점 : 다른 useEffect에서 사용할 때 undefined가 뜰 수 있기 때문에 객체라면 객체? 로 한번 스킵 할 수 있도록 사용한다.

※ useEffect에 변수를 많이 넣지 않아야 하는 이유

- useEffect에서 넣으면 브라우저의 사용량이 늘어난다.

※ useEffect에 addEventListener를 사용할 때 주의점

- event 입력 시 다른 페이지의 영향이 될 수 있기 때문에 꼭 removeEventListener를 해줘야지만 다른 페이지의 영향이 가지 않는다.