4월21일(금) 자식->부모컴포넌트 props 전달

        return (
            showModal && createPortal(
                <KeywordSearchModal onClose={onCloseModalHandler} 
                onConfirm={handleModalConfirm}
                //  이거 빠지면 SearchKeywordModal.jsx파일에서 
                // 155번째줄 onSearch(places[i]); 부분 에러. onSearch is not a function
                onSearch={handleSearchResult}
                onUpdate={(checkedPlace) => console.log(checkedPlace)}
                />,
                document.body
            )
        );

정말 너무너무 돌아왔다. 처음에는 아무 생각 없이 부모 자식 컴포넌트 관계를 잊고 단순히 props를 전달하려고 몇날을 노력했다. 근데 도저히 되지 않아 chatGPT로 찾아보니 역시나 된다고 얘기를 계속해서 내가 못하나보다 해서 정말 코드를 수도 없이 바꾸고 추가하고 삭제하고 했다. 그러다 이건 아닌 거 같아 다른 방법들 local storage로 하던가 아니면 UI를 바꿔야하나 등등 고민하고 있는데 구글에서 자식컴포넌트에서 부모컴포넌트 전달은 다른 방법을 사용 한다고 하는 것을 봤다. next.js는 아닌 줄 알았는데 (이래서 기본이 잘 되어있어야, 기초 공부를 잘 해놔야 하나보다) 아니라 그때부터 엄청 찾아봤다. 부모컴포넌트에서 전달해준 props는 onClick 같은 것을 사용해서 그게 클릭이 될 때 가 자식컴포넌트에서 부모컴포넌트로 값을 전달 해 줄 수 있다는 것을 깨달았고, 이것까지 이해하는 것도 오래 걸렸다. 그러고 수없이 반복하며, 값이 부모 컴포넌트로 넘어오기 성공. 그리고 그게 return 값으로 onUpdate={(checkedPlace) => console.log(checkedPlace)} 이렇게 받아 온 것이기에 꺼내 써야는데 onUpdate를 그냥 쓰거나 checkedPlace를 그냥 쓰면 당연히 오류가 났다. 여러가지로 노력하던 중 handler를 만들어 state값에 넣어 값을 뺴야되는 부분 깨달았다.

    //  부모컴포넌트에서 자식 컴포넌트 props 전달 연습
    const [checkedPlace, setCheckedPlace] = useState(null);
    //  자식 컴포넌트 props 꺼내서 쓸 수 있도록 한다.
    function checkedPlaceHandler(place) {
        setCheckedPlace(place);
    }

이렇게 Handlerd에다가 state 값 넣고 그걸 onUpdate={checkedPlaceHandler}를 넣으면 자식 컴포넌트에서 클릭 이벤트 작동하면 값도 불러오고 그 값을 빼서 사용할 수 있는 것 깨달았다.. 여기까지 너무 돌아왔다. 3일 밤낮을 정말 오로지 이거에만 쏟았다... 오히려 이거만 보니 시야가 좁아지고 조급해져서 넓게 보지못하고, 정말 기본적인 그렇지만 가장 중요한 부분들을 놓친 거 같다...