[react native] <TextInput> value 와 onChangeText 함께 사용하기

게시판의 글을 쓸 수 있는 제목과 내용인데, 글자를 쓸 수 있게끔 <TextInput> 을 배치했다.

내가 쓴 글을 수정하려면 기존에 썼던 내용을 불러와서  셋팅 해놔야겠지?

 

useEffect() 를 통해 셋팅해볼까? 

useEffect 는 컴포넌트가 랜더링 될 때마다 실행하는 hook 이다.

  const [title, setTitle] = React.useState('');
  const [content, setContent] = React.useState('');
  
  useEffect(() => {
      const fetchArticles = async () => {
        const postData = await getPostBasicInfo();
        setTitle(postData[0].TITLE);
        setContent(postData[0].CONTENT);
      };

      fetchArticles();
  });

getPostInfo() 에서 API 호출을 통해 데이터를 가지고 와서 state 에 값을 저장해두고

<TextInput
              style={styles.title_input}
              multiline={true}
              scrollEnabled={true}
              placeholder="제목"
              placeholderTextColor="#99BEAB"
              maxLength={50}
              onChangeText={(text) => setTitle(text)}
              value={title}
></TextInput>

이렇게 TextInput 의 value 값을 방금 가져온 title state 를 두면 (content도)

title 과 content 에 가져온 글을 나타낸다. 다 된 것 같지만 <TextInput> 의 글을 수정할 때 글자를 타이핑 해도

다시 처음에 갖고온 title 또는 content  내용으로 고정되어 돌아가는 것이었다

원인은 바로 useEffect 의 두 번째 파라메터에 달려있다.

저 두 번 째 파라메터에 아무 것도 안넣으면 <TextInput> 에서 onChangeText 로 State (title 또는 content) 을 건드는 순간

이 useEffect() hook 을 실행해버리기 때문에 다시 제자리로 돌아온다. (onChangeText -> useEffect -> API 호출 ->

다시 setTitle 로 무한반복 제자리)

저렇게 [] 빈 배열을 넣으면 useEffect() 을 초창기 1번만 실행하겠다. 라는 뜻이다. 

이렇게 두 번째 파라메터에 배열 안에 값을 넣으면 특정 값만 지켜보겠다~ 라는 뜻이다. 다른값은 건드려도

이 useEffect hook 을 다시 수행하지 않지만 [title] 을 적으면 title 만 지켜 보다가 값이 건드렸다! 하는 순간

useEffect() 을 수행해버리기 때문이다.

 

그래서 결론은 초창기 1회만 랜더링 된 후에 state 에 값을 담아와서 뿌려줘야 하니까

useEffect 에 2번째 파라메터에 [] 을 넣어주면 해결된다