비동기 처리
동기 vs 비동기
동기 : 요청을 보낸 후, 해당 응답을 받아야 다음 동작을 실행한다
비동기: 요청을 보낸 후 응답에 관계없이 다음 동작을 실행
useState
const [state, setState] = useState(initialState);useState함수를 호출하면 그 변수를 수정할 수 있는 세터 함수를 배열로 반환.
파라미터로 전달한 값을 초깃값으로 갖는 상태 변수와 그 변수를 수저알 수 있는 세터 함수를 배열로 반환한다. 관리해야하는 상태의 수만큼 여러 번 사용할 수 있다. 상태를 관리하는 변수는 반드시 세터함수를 이용해 값을 변경해야 하고, 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 다시 렌더링 한다.
const Counter = () => {
//count : 숫자의 상태를 나타냄.
const [count, setCount] = useState(0);
return (
<>
<StyledText>count: {count}</StyledText>
{/* 버튼이 클릭될 때 마다 세터함수를 이용해 상태를 변경한다. */}
<Button title="+"
onPress={() => { setCount(count + 1); }}
/>
<Button title="-"
onPress={() => { setCount(count - 1); }}
/>
</>
);
};세터 함수
useState에서 반환된 세터 함수를 사용하는 방법은 2가지.
-
세터 함수에 변경될 상태의 값을 전달
-
세터 함수의 파라미터에 함수를 전달
전달된 함수에는 변경되기 전의 상태 값이 파라미터로 전달되며, 이 값을 어떻게 수정할지 정의한다.
세터함수 : 비동기로 동작. 상태 변경이 여러 번 일어날 경우 상태가 변경되기 전에 또 다시 상태에 대한 업데이트가 실행되는 상황이 발생된다.
예시: setState(prevState => {});<Button
title="+"
onPress={() => {
setCount(count + 1);
setCount(count + 1);
console.log(`count: ${count}`);
}}
/>증가 버튼 -> 세터함수 2번 호출, 콘솔에는 현재 상태값 출력
세터함수가 비동기로 동작하기 때문에 세터함수를 호출해도 바로 상태가 변경되지 않는다는 점에서 발생하는 문제이다. 이렇게 상태에 대해 여러 업데이트가 함께 발생할 경우, 세터함수에 함수를 인자로 전달해서 이전 상태값을 이용하면 문제를 해결할 수 있다.
<Button
title="+"
onPress={() => {
// 이전 상태의 값에 의존하여 상태를 변경할 경우, 세터함수에 인자로 전달하여 이전 값을 이용하도록 작성해야한다.
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
}}
/>useEffect
useEffect는 컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정할 수 있는 기능.
useEffect(() ⇒ {}, []);
// 첫 번째 파라미터로 전달된 함수는 조건을 만족할 때마다 호출
// 두 번째 파라미터로 전달되는 배열을 이용해 함수가 호출되는 조건 설정useEffect
두 번째 파라미터에 어떤 값도 전달하지 않으면 useEffect의 첫 번째 파라미터로 전달된 함수는 컴포넌트가 렌더링될 때마다 호출된다.
const Form = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
useEffect(() => {
console.log(`name: ${name}, email: ${email}\n`);
});
return (
<>
<StyledText>Name: {name}</StyledText>
<StyledText>Email: {email}</StyledText>
<StyledTextInput
value={name}
onChangeText={text => setName(text)}
placeholder="name"
/>
<StyledTextInput
value={email}
onChangeText={text => setEmail(text)}
placeholder="email"
/>
</>
);
};email, name값을 변경할 때마다 console에 바뀐 값이 나온다. 값을 변경해서 컴포넌트가 다시 렌더링 될 때마다 useEffect에 전달한 함수가 실행된다.
특정 조건에서 실행
useEffect에 설정한 함수를 특정 상태가 변경될 때만 호출하고 싶은 경우, useEffect의 두 번째 파라미터에 해당 상태를 관리하는 변수를 배열로 전달한다.
useEffect(() => {
console.log(`name: ${name}, email: ${email}\n`);
}, [email]);⇒ email의 상태가 변경되었을 경우에만 함수가 실행된다.
마운트될 때 실행
useEffect에 전달된 함수의 실행 조건이 컴포넌트가 마운트될 때로 설정: 두 번째 파라미터에 빈 배열을 전달하면 컴포넌트가 처음 렌더링될 때만 함수가 호출된다.
마운트하다 : 어떠한 것을 available 한 상태로 준비하다.
원래 리눅스 명령어인 mount: 디스크...와 같은 물리적 장치를 특정 위치 즉 디렉토리에 연결해주는 것. 이건 내부에서 요즘 자동으로 ...
useEffect(() => {
console.log('\n===== Form Component Mount =====\n');
}, []);컴포넌트가 처음 렌더링될 때 함수가 호출되고, 상태가 변해 컴포넌트가 다시 렌더링되어도 함수가 실행되지 않는다.
언마운트될 때 실행
useEffect에서는 전달하는 함수에서 반환하는 함수를 정리함수라고 하는데, useEffect의 실행 조건이 빈 배열인 경우, 컴포넌트가 언마운트될 때 정리 함수를 실행한다.
useRef
웹 프로그래밍 시 특정 DOM을 선택해야하는 상황에서 getElementById 혹은 querySelector와 같은 DOM selector 함수를 사용한다. rn에서도 특정 컴포넌트를 선택해야하는 경우가 있다. 예로, 컴포넌트로 포커스를 설정하고 싶은 경우 해당 컴포넌트를 선택할 수 있어야한다.
const ref = useRef(initialValue);useRef를 사용할 때 주의해야 할 점은 2가지.
- 컴포넌트의 ref로 지정하면 생성된 변수에 값이 저장되는 것이 아니라 변수의 .current 프로퍼티에 해당 값을 담는다.
- useState를 이용하여 생성된 상태와 달리 useRef의 내용이 변경돼도 컴포넌트는 다시 렌더링되지 않는다.
