개발자.. 너란놈..

※ 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를 해줘야지만 다른 페이지의 영향이 가지 않는다.

※ hooks

- 리액트 16버전에서 새로 나온 개념으로 리액트에서 자주쓰이는 상태관리, 생명주기 관련 내용들을 내장함수처럼 미리 만들어놓은 라이브러리 형태의 기능모음
- 리액트 hook의 등장으로 인해서 기존의 클래스형 컴포넌트 제작방식에서 함수형 컴포넌트 제작 방식으로 리액트의 작업 난이도가 낮아지면서 인기가 올라감

※ hook이 나오게 된 배경

- React16이전 버전에서는 클래스형 작업방식 , 함수형 작업방식

• 클래스형 작업방식 : 여러가지 클래스를 제작해서 서로 상속을 작업을 하다보니 코드의 가독성은 비교적 좋으나 반복코드 작업을 많이 했었어야 됨
• 함수형 작업방식 : hoc(high order component) 함수에 인수로 함수를 전달해서 새로운 함수를 리턴하는 방식, 반복 코드는 적으나 코드 가독성이 많이 떨어짐

- 함수형 작업방식의 문제점인 hoc를 활용하는 기능들을 라이브러리처럼 hook라는 개념으로 미리 만들어서 배포
- 2016년도 이후부터 hook의 등장으로 class형 방식에 비해 함수형 component 방식의 효율성이 증대 

React의 hook 삼대장 (useState , useEffect , useRef)
성능관리를 위한 hook (memo, useMemo , useCallback)
양방향 데이터 바인딩을 위한 hook (forwarRef , useImperativeHandle)

※ State (상태값)

- 리액트에서 컴포넌트의 화면 출력 (rendering)을 담당하는 중요 정보값을 담는 그릇
- 컴포넌트 안에서 State 값이 변경되면 해당 컴포넌트 화면이 자동으로 reRandering 됨 (함수가 재 호출)

※ State 사용법

- 리액트로 부터 useStat라는 state 생성해주는 전용 기능을 import (hook) : hook은 무조건 컴포넌트 함수 내부에서 호출 되어야 함
- useState 함수를 통해서 State와 State를 변경해주는 함수를 비구조화 할당상으로 받음
- 해당 State값을 무조건 State전용 변경함수를 통해서만 변경 가능
- useState는 배열값을 리턴 [인수로 전달한 값을 state 담아서 첫번째 값 , 해당 state를 변경 할 수 있는 전용 함수]
const [IsPop,setIsPop] = useState(false);
- uss 클릭하고 useStateSnippet 선택하면 자동 구문 완성
- State를 onClick에 넣으려면 () => 로 화살표 함수로 넣어야지만 무한루프를 타지 않는다.

- 자식 컴포넌트로 useState를 보내기
부모 - 자식 컴포넌트로 setIsPop State 변경 함수를 prop으로 전달
{IsPop && <Popup setIsPop={setIsPop} />}

자식 - 자기 자신을 닫아주는 State가 자기가 아닌 부모 컴포넌트를 있으므로 부모 컴포넌트로 부터 State 변경 함수를 props로 전달받아 호출
function Popup({ setIsPop }) {
- state에 담기는 정보 값이 원시형이 아닌 배열이나 객체같은 참조형 자료이면 무조건 전개연산자로 복사본을 만들어서 변경 처리 (불변성유지)
- React에서 state에 불변성을 유지하는 이유는 원본과 바뀔 복사본을 비교 대조해서 화면을 ReRandering 하기 때문

※ State에 선언된 배열을 쓰기

- 기존에 선언된 배열의 부분값만 변경하면 변경이 되지 않고, 배열을 copy한 뒤 한번에 바뀌어야지만 변경이 가능함.
EX) const [Colors, setColors] = useState(['red', 'green', 'blue']);

//기존의 colors에 들어가 있는 참조형 자료인 배열 값을 Deep Copy
const newColors = [...Colors];
//원본은 유지한채 복사가된 배열값을 변경
newColors[2] = 'aqua';
//변경된 복사된 배열값을 state 변경 함수로 변경 처리
setColors(newColors);