Hooks

1. useState

• 함수 내부에서 상태값을 1차 변경시키고 1차 변경된 결과를 가지고 다시 2차로 변경하고자 할때 1차 변경 과정이 즉시 반영이 안되었음

• 예전에 해결 못한 유사 상황
  https://github.com/codestates/urscene/issues/227
  예전에는 useRef를 사용하여 해결을 하긴 했었다.

• useState의 set함수에 변경상태값을 전달하는 것이 아닌 함수를 전달한다.

  const Counter = () => {
   const [count, setCount] = useState(0);
   return (
     <>
       <StyledText> count : {count}</StyledText>
       {/* <Button title="+" onPress={() => setCount(count + 1)}></Button> */}
       <Button
         title="+"
         onPress={() => {
           setCount(count => {
             console.log('prev 1', count); // 0
             return count + 1;
           });
           setCount(count => {
             console.log('prev 2', count); // 1
             return count + 1; // 함수 종료시 count 는 2
           });
           console.log(count); // 0
         }}
       ></Button>
       <Button title="-" onPress={() => setCount(count - 1)}></Button>
     </>
   );
  };
  

2. useEffect

• 재렌더링시마다 호출

  useEffect(함수)

• 화면 마운트시 발생

  useEffect(함수, [])

• 화면 언마운트시 발생

  useEffect(()=>{return 함수}, [])

• 조건 설정 : count가 변경되어 재렌더링되는 경우

  useEffect(함수, [count])

// Form.js
import react from 'react';
import { useState, useEffect } from 'react';
import styled from 'styled-components/native';
import Button from './Button';

const StyledInput = styled.TextInput`
  border: 1px solid #111111;
  padding: 10px;
  margin: 10px 0;
  width: 200px;
  font-size: 24px;
`;

const StyledText = styled.Text`
  font-size: 24px;
  margin: 10px;
`;

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  useEffect(() => {
    console.log('mount');
    return console.log('unmount');
  });
  
  useEffect(() => {
    console.log(`name: ${name}, email: ${email}`);
  }); // [email] 또는 [name] 하나씩만 넣어서 로그 값 확인

  return (
    <>
      <StyledText>Name : {name}</StyledText>
      <StyledText>Email : {email}</StyledText>
      <StyledInput
        value={name}
        onChangeText={text => setName(text)}
        placeholer="name"
      />
      <StyledInput
        value={email}
        onChangeText={text => setEmail(text)}
        placeholer="email"
      />
    </>
  );
};

export default Form;

3. useRef

• useRef 를 사용하는 다른 상황을 알수 있었다.

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const refName = useRef(null);
  const refEmail = useRef(null);

  useEffect(() => {
    console.log('mount');
    refName.current.focus();  // 초기 렌더링시 포커스 지정
    return console.log('unmount');
  }, []);

  // useEffect(() => {
  //   console.log(`name: ${name}, email: ${email}`);
  // }, [email]);

  const onSubmit = () => console.log('submit');

  return (
    <>
      <StyledText>Name : {name}</StyledText>
      <StyledText>Email : {email}</StyledText>
      <StyledInput
        value={name}
        onChangeText={text => setName(text)}
        placeholer="name"
        ref={refName}
        returnKeyType="next"
        onSubmitEditing={() => refEmail.current.focus()}  // 완료버튼시 지정된 포커스로 이동하게
      />
      <StyledInput
        value={email}
        onChangeText={text => setEmail(text)}
        placeholer="email"
        ref={refEmail}
        returnKeyType="done"
        onSubmitEditing={onSubmit}
      />
    </>
  );
};

4. custom Hooks

• 공용 API 목록
  https://github.com/public-apis/public-apis