Input 리렌더링 막기

문제

오류는 아니지만 useState()로 입력값을 관리하도록 하고 useEffect()안에 아무거나 콘솔에 출력해보면 입력할 때마다 콘솔에 뭐가 찍히는 걸 확인할 수 있다.
-> 입력할 때마다 컴포넌트가 리렌더링된다!🥹
그냥 단순한 구조면 괜찮을 수 있지만 나는 부모 컴포넌트까지 리렌더링이 일어나서 문제였다.

해결

useRef() 사용하면 된다.
useRef()는 입력값을 저장만 하고 컴포넌트를 리렌더링하지는 않는다.
바빴는지 코드도 안써놓고 덜렁 참고한 링크만 써놨네

//부모 컴포넌트
const inputRef = useRef(null);

...

<ChatInput inputRef={inputRef} />

//자식 chatInput.js
const [input, setInput] = useState('');

const handleInput = (e) => {
        inputRef.current.value = e;
        setInput(e);
};

const handleSend = () => {
        setInput('');
        inputRef.current.value = undefined;
};
...

<Input 
  value={input}
  onChangeText={handleInput} />

<InputBtn>
   <ArrowUpBtn onPress={handleSend} />
</InputBtn>

간단하게~
React Native라 문법이 조금 다를 수 있음

ref는 컴포넌트가 언마운트되기 전까지는 값을 유지함.
그래서 ref만 쓰면 버튼을 눌러도 인풋에 값이 사라지지 않고 그래도 있음.
-> 값을 초기화해주려면 useState로 따로 관리해줘야 한다.

이거 보고 해결함
useRef 사용으로 input 최적화하기