Next.js 렌더링을 막고 싶습니다.

코드를 보여주셔야 알 것 같은데요 혹시 onchange 에 연결한 함수가 이벤트일때만 동작하게 안해놓으셔서 그런게 아닐까 지레짐작 해봅니다.

부모 컴포넌트의 렌더링을 막기보다 리렌더링시에 서버와 통신 하는 코드 실행을 막아야 할 것 같습니다. useEffect를 사용해서 디펜던시에 따라 의도된 시점에 서버와 통신할 수 있도록 구현하는건 어떨까요?

안녕하세요! 제가 이해한 바로는 아래의 흐름인데: - 상태가 부모 컴포넌트에 있고 - 상태 변환 setter를 props로 자식 컴포넌트에게 주고 - 자식 컴포넌트에서 setter를 수행할때마다 부모 컴포넌트의 서버 연결 로직이 다시 수행된다 몇 가지 질문이 있습니다. 1. 부모 컴포넌트의 서버 연결 로직이 혹시 어디에 있나요? useEffect안에 있고 deps가 []인 상태인가요? 2. 상태를 바꾸는 거는 리액트의 리렌더링 조건 중 하나여서 부모 컴포넌트에 상태가 있다면 일반적인 방법으로 리렌더링을 막을 수는 없을 것 같습니다. 혹시 부모 컴포넌트에서 상태를 관리해야하는건가요? 3. 2번이 "yes"라면, 부모 컴포넌트에서 state 대신 ref를 사용해서 해결이 가능한가요?

다들 많은 답변 감사합니다. 부모 컴포넌트에서 useEffect를 사용하여 서버에 연결하는 로직은 디펜던시로 조건을 주었지만, 자식 컴포넌트에서 props로 받은 부모의 state값을 onchange 함수가 일어날때마다 useEffect 로직도 작동을 하더라구요. ` ` ` 결론적으로는 인풋값을 state를 사용하지 않고, ref를 사용하여 리렌더링을 막았습니다. // 자식컴포넌트입니다. 부모로부터 const inputRef = useRef(""); 값을 받아왔습니다. export default function Send({ sendFunc, inputRef }) { const onChange = (e) => { inputRef.current = e.target.value; console.log(inputRef.current); }; return ( <SendBox> <SendInput onChange={onChange} /> <SendButton onClick={sendFunc}>보내기</SendButton> </SendBox> ); }