[react-native] Hooks

👩‍💻  Hooks

---

 

 

📌Hooks

✏️ Hooks란?

: Hooks에 대해 알아보자.

 

 

 

 

 

✏️ useState 사용법

: 컴포넌트 상태를 관리하기 위해 useState 사용

 

• 기본 문법
  • const [state, setState] = useState(initialState);
    • 선언: int a =10,           읽기: print(a)                쓰기: a = 20
    • 선언: const [a, setA ] = useState(10)    읽기:print(a)      쓰기:setA(20)
  • useState 함수를 호출하면 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환
  • 단순한 값부터 복잡한 리스트, 객체까지 모두 사용할 수 있음
  • useState 함수는 관리해야 하는 상태의 수만큼 여러 번 사용할 수 있음
  • 상태를 관리하는 변수는 반드시 세터 함수를 이용해 값을 변경해야 함
  • 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 다시 렌더링됨

 

 

 

✏️ 예제 작성

: 숫자의 상태를 나타내는 count를 생성

 

- 숫자의 상태를 나타내는 count를 생성
- Button 컴포넌트를 이용하여 클릭될 때마다 세터함수를 이용해 상태 변경 ( + 버튼은 상태값을 +1, - 버튼은 상태값을-1)

 

 

 

 

📌 Setter 함수

✏️ 세터 함수란?

: 세터 함수에 대해 알아보자.

 

useState에서 반환된 세터 함수를 사용하는 방법은 두 가지

방법 1. 
세터 함수에 변경될 상태의 값을 전달하는 방법
(Ex)    setState(10)

방법 2.
arrow 함수 전달, 변수명은 형식인자이기 때문에 어떤 변수명도 가능
(Ex)    setState(prevState => new value)
           setState( (old) => new value)
           setState(prevstate => {return new value });


전달 된 함수에는 변경되기 전의 상태 값이 파라미터로 전달되기 때문에 이 값을 사용해 새로운 값을 변경함


 (ex)          setCount( count * 2)

(ex)          setCount( prevState => prevState * 2)   #걍 요거 추천

 (ex)           setCount( count => count * 2)

 (ex)           setCount( count => { return count * 2 })

- 연속해서 상태 변경 함수를 호출할 경우 두 번째 방법을 사용해야 함 -

 

 

"Arrow 함수란 무엇일까?"

 

 

✏️ 값을 이용한 setter 함수 호출

 

"위의 코드는 문제가 있다"

세터 함수가 비동기로 동작하기 때문에 세터 함수를 호출해도 바로 상태가 변경되지 않는다. 따라서 버튼 클릭해도 1씩 증가한다

 

 

위의코드를 수정해보자

"문제 해결"

버튼을 클릭하면 +2씩 증가한다 !