export

const hello = "Hello World!"
export {hello};

export default

const hello = "Hello World!"
export default hello

한 파일 내에 하나의 개체만 있다면 그냥 export default로 내보내면 되지만, 여러 객체가 있는 경우 export를 사용하여 원하는 객체를 골라 내보낼 수 있는 것 같다.
(export { name1, name2, name3 }; 같은 식으로...)
export default는 객체명을 임의로 설정할 수도 있다구 한다.

버튼 라우팅

<button className='addBtn' 
            onClick={() => {
                history.push(`/add`)
            }}>+</button>

history가 제일 편한 것 같다 ㅇ ㅅ ㅇ
뒤로가기는 history.goBack()

🙋‍♀️ref

이전에 html, js만을 다룰 땐 getElementById, appendChild 등의 방법으로 값을 가져왔었다면, 리액트에선 ref를 사용해 관리한다.
가상DOM에는 input이 있지만 실제 DOM엔 아직 input이 업데이트 되지 않은 상황에서 실제 DOM의 input을 건드리는 getElement--- 등을 사용하면 에러가 발생하기 때문에,
ref를 사용해 DOM요소를 가져와야 한다.

한마디로 정리하면 이름표...?

render과정에선 input이 DOM에 도달해있지 않아 null 출력.

그럼 value값을 확인하려면...?

onChange()를 사용해 확인 가능
입력 값이 변할 경우 onChange()에 넣어둔 함수가 호출됨.

👍👍👍👍👍
onChange가 실행되는 순간은 이미 input이 마운트 된 뒤이기 때문에 에러가 발생하지 않는다!

함수형 컴포넌트에선?

리액트 훅 useRef()를 사용한다.
함수형 컴포넌트는 라이프 사이클 메서드를 사용할 수 없어 constructor에서 초기화를 할 수 없기 때문에, 변수 선언 단계에서 초기값으로 null을 입력해준다.

div에 ref를 주었지만 초기값 상태에서 변하지 않고 그대로 null이 찍힘 => 렌더 단계 전에서 console.log 찍으면 당연히...🤣! (실제로 렌더 된 뒤 다시 조회될 땐 div가 찍힌다.)

    window.setTimeout(() => {
        console.log(my_wrap);
    }, 1000);

이렇게 렌더 되는 것을 기다렸다가 실행되게 만들면 div가 찍혀 나온다.