부모 컴포넌트에서, 여러 개의 자식 컴포넌트로 state를 전달했습니다.
자식 컴포넌트에는 input 태그가 있어서 부모 컴포넌트로부터 받은 state를 적절히 변경합니다.
부모 컴포넌트에서는 또, 저장 버튼 기능을 하는 자식 컴포넌트로 doSave라는 함수를 전달하며,
이 doSave 함수에서는 부모 컴포넌트의 state값을 가져와서, 새로운 값을 데이터베이스에 전송합니다.
버튼을 클릭할 때 여러 개의 input 자식 컴포넌트에서 변경시킨 state값을 데이터베이스에 저장하게 했습니다.
input 태그가 있는 자식 컴포넌트에서 변경한 값이 부모 컴포넌트에서는 잘 인식이 됩니다.
문제는 버튼 쪽인데, 이 버튼 컴포넌트에서 doSave 함수가 실행될 때, 최신의 state값을 참조하질 못합니다.
그니까 결과적으로 저장버튼을 백날 눌러도 아무것도 갱신이 안 됩니다
버튼 컴포넌트로 함수를 전달해줄때, 안에서 쓰일 state 값들이 고정된 상태로 전달되는 것 같은데
뭔가 납득이 갈 만큼 깔끔하게 코드를 짜고 싶은데
당장 생각나는건 버튼 컴포넌트를 div같은걸로 한 번 감싸서 거기다가 그냥 onClick 달아버리는거밖에 없습니다.. 근데 이건 좀 아닌 거 같은데
독학하기 쉽지 않네요 맨날 뭐가 궁금하고 뭐가 맞는지 모르겠고
자식들은 동시에 같은 상태를 참조하는거에요? 아님 각기 다른 상태를 참조하는거에요?
doSave는 부모 컴포넌트의 상태값을 가져오는게 아니라 자식이 가진 상태를 전송해야하는거 아닐까요?
자식들은 같은 상태를 참조합니다 그 자식이 가진 상태값을 또 자식끼리 전달해줘야 할까요? 둘을 연결해줄 곳은 부모 컴포넌트인디 아니면 밑의분 댓처럼 그냥 리덕스 스토어에 넣어버리는게 나을런지
간단한건 상태관리 라이브러리 사용하는건데, 어쨌든 doSave에서 자식상태를 부모상태로 만들어줘야 할듯여
그것이 영 제가 원하는 방향으로는 딱히 방법이 없나보네요 원래는 ref로 input태그의 값을 가져오는거였는데 이건 진짜 최악같은디 ㅠㅠ 다른 방법을 강구해보겠습니다 감사해요
react context 써보세여. 이 상황에서는 딱일듯?
오 알게슘다
상태관리 라이브러리 사용
이게 답임
context를 안쓰고 doSave를 호출할때 부모의 상태값을 자식이 어떻게 전달받나요? doSave() => { return parentState.value } 이런 식으로 하시고 자식에게 doSave 함수를 내려주시나요? 실험은 안해봐서 정확히 모르겠는데 부모가 리렌더링 해도 자식은 prop이 바뀌지 않으니깐 최적화를 위해 리액트가 새로운 doSave 인스턴스를 발급해주지 않고 재활용 해서 그런 것 아닐까요? 그러면 참조하는 parentState는 이미 리렌더링 하고 버려진 부모의 과거 인스턴스를 참조할 수도 있겠네요.
아무튼 보통 이런 경우는 부모가 ref 내려주고 자식이 input에 ref 끼웁니다... 타자 하나 칠때마다 리렌더링을 방지하기 위해서는 이게 가장 좋은 방법이라 생각해요.
댓글을 늦게 확인했습니다.. 애시당초 ref를 각각 끼운 상태였는데 이게 제가 보기에 뭔가 규격에 안 맞는? 그야말로 야매 코딩 같아서 그랬는데 ㅠㅠ 괜한 고생을 했던거였나보네요 덕분에 확신을 얻었습니다 감사합니다