안녕하세요 리액트의 컴포넌트를 이용해서 열심히 만들고 있는 중입니다.
다만 이런 부분에서 문제가 생겨서 다시 질문 드리게 되었습니다.
우선 최 상단 컴포넌트인 a가 있고
a 안에서 b c라는 각각의 컴포넌트를 호출합니다.
c라는 컴포넌트의 어떤 버튼을 눌러서 결과를 보려면
b가 가지고 있는 state내용이 필요합니다.
이러한 경우에 콜백 함수로 버튼의 변화에 따라 b-> a컴포넌트로 값을 계속 전달해 주게 하였더니
a컴포넌트가 최 상단 컴포넌트 이기 때문에 값이 전달되서 state가 업데이트 되는 순간 전체 웹페이지가 재 렌더링 되어버리는 현상이 발생하였습니다.
state를 업데이트 하지 않고 값만 주면 될까 ..하는 마음에 해보았으나, 값은 변경이 되었지만 변경된 값이 c컴포넌트가 전부 랜더링이 된 상태이기 때문에 전달되지 못했습니다.(또는 전달이 되었으나 랜더링이 일어나지 않았습니다)
요약을 해보면
최상단 a컴포넌트에서 각각 부분을 맡고있는 b c 컴포넌트가 있는데, b컴포넌트가 가지고 있는 state 의 내용을 c컴포넌트에서 특정 이벤트가 발생할때(c컴포넌트에 들어있는 버튼을 누를 때) b컴포넌트의 값을 가져오고 싶습니다.
기존 b->a->c방식은 전체 페이지를 재 랜더링 하므로, 다른 컴포넌트들 까지 강제 재 랜더링 시키기 때문에 피하고 싶습니다.
제가 애초에 처음부터 구조를 잘못짠 것인지.. 잘 모르겠습니다 혹시 방법이 있을까요?
위에 말한 경우를 예로 들자면 b컴포넌트는 장르를 선택하는 버튼들( 발라드, kpop, ost) 이고, 사용자가 b컴포넌트에서 장르들을 선택할 수 있으며, c컴포넌트의 선택한 장르 확인하기 버튼을 누르면, b컴포넌트의 선택된 장르를 가져와야 합니다.
b컴포넌트가 선택될 때마다 onchange같은 함수로 콜백함수로 사용하게 되면 a컴포넌트를 재 랜더링 하므로 a컴포넌트를 재 랜더링 하지 않고 값을 c컴포넌트로 전달하고 싶습니다.
