[4주차] Hooks와 Context API

🔎 6장 Hooks

Hooks는 리액트 16.8 버전에 새롭게 추가된 기능입니다. Hooks를 사용해 컴포넌트 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행할 수 있습니다.

 

6.1 useState

useState 함수를 호출하면 변수와 그 변수를 수정할 수 있는 setter 함수를 배열로 반환합니다.

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <StyledText>count: {count}</StyledText>
      <Button title="+" onPress={() => setCount(count + 1)} />
      <Button title="-" onPress={() => setCount(count - 1)} />
    </>
  );
};

 

❓ 세터 함수

• 세터 함수에 변경될 상태의 값을 전달
• 세터 함수의 파라미터에 함수를 전달

그냥 변경될 상태의 값을 전달하는 경우 아래 코드의 setCount가 한 번밖에 작동하지 않습니다.

onPress={() => {
	setCount(count + 1)
	setCount(count + 1)
}}

❗ 세터 함수가 비동기로 동작하기 때문에 세터 함수를 호출해도 바로 상태가 변경되지 않는 것

→ 세터 함수에 함수를 인자로 전달해야 합니다.

onPress={() => {
	setCount(prevCount => prevCount + 1);
	setCount(prevCount => prevCount + 1);
}}

→ setCount가 두 번 작동합니다.

 

---

 

6.2 useEffect

useEffect는 컴포넌트가 렌더링 될 때마다 원하는 작업이 실행되도록 설정할 수 있는 기능입니다.

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

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

  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"
      />
    </>
  );
};

 

❓ 특정 조건에서 실행하기

특정 상태가 변경될 때만 호출하고 싶은 경우 두 번째 파라미터에 상태 관리 변수를 배열로 전달하면 됩니다.

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

→ email이 변경될 때만 useEffect가 실행됩니다.

 

❓ 마운트될 때 실행하기

마운트 될 때 실행하도록 설정하고 싶으면 두 번째 파라미터에 빈 배열을 전달하면 됩니다.

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

 

❓ 언마운트될 때 실행하기

useEffect 마지막에 리턴문을 사용하면 해당 구문은 언마운트 될 때 실행됩니다.

useEffect(() => {
    console.log(`name: ${name}, email: ${email}`);
		return () => console.log('unmount\\n');
  }, []);

 

---

 

6.3 useRef

Javascript에서 특정 DOM을 선택할 때 getElementById와 같은 함수를 사용합니다. 같은 상황에 리액트에서는 ref를 사용해 컴포넌트를 선택합니다.

useRef는 특정 컴포넌트를 선택해야 하는 상황에서 사용할 수 있는 Hook입니다.

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

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

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

  return (
    <>
      <StyledText>Name: {name}</StyledText>
      <StyledText>Email: {email}</StyledText>
      <StyledTextInput
        value={name}
        onChangeText={(text) => setName(text)}
        placeholder="name"
        ref={refName}
        returnKeyType="next"
        onSubmitEditing={() => refEmail.current.focus()}
      />
      <StyledTextInput
        value={email}
        onChangeText={(text) => setEmail(text)}
        placeholder="email"
        ref={refEmail}
        returnKeyType="done"
      />
    </>
  );
};

다음과 같이 설정해놓으면 처음 focus가 refName으로 향하고 return key를 누르면 refEmail로 focus가 향합니다.

❗ 해당 변수가 아니라 변수의 .current 프로퍼티에 해당 값을 담습니다.

 

---

 

6.4 useMemo

useMemo는 동일한 연산의 반복 수행을 제거해 성능을 최적화합니다.

const getLength = (text) => {
  console.log(`Target Text: ${text}`);
  return text.length;
};

const list = ["javascript", "expo", "expo", "react native"];

let idx = 0;

const Length = () => {
  const [text, setText] = useState(list[0]);
  const [length, setLength] = useState("");

  const _onPress = () => {
    setLength(getLength(text));
    ++idx;
    if (idx < list.length) setText(list[idx]);
  };

  return (
    <>
      <StyledText>Text: {text}</StyledText>
      <StyledText>Lenght: {length}</StyledText>
      <Button title="Get Length" onPress={_onPress} />
    </>
  );
};

해당 코드를 실행해보면 마지막 값 이후에 문자열의 변화가 없음에도 getLength 함수가 계속 호출됩니다.

const _onPress = () => {
    ++idx;
    if (idx < list.length) setText(list[idx]);
  };
  const length = useMemo(() => getLength(text), [text])

→ useMemo를 사용해 text값이 변경될 때만 함수를 호출할 수 있습니다.

 

---

 

6.5 커스텀 Hooks 만들기

특정 API에 GET 요청을 보내고 응답을 받는 Hook 함수를 만들어봅시다

export const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        const result = await res.json();
        if (res.ok) {
          setData(result);
          setError(null);
        } else {
          throw result;
        }
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);
  return { data, error };
};

const { data, error } = useFetch(URL)

간단하게 Hook을 만들고 사용할 수 있습니다.

❗ 대부분의 비동기 작업 화면에서는 작업이 완료되기 전에 화면 전체나 특정 버튼이 사용할 수 없는 상태가 됩니다.

→ API 요청의 진행 상태를 알 수 있어야 비동기 요청 작업 상황에 따라 화면 구성을 달리 할 수 있습니다.

→ inProgress 상태 추가

export const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [inProgress, setInProgress] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setInProgress(true);
        const res = await fetch(url);
        const result = await res.json();
        if (res.ok) {
          setData(result);
          setError(null);
        } else {
          throw result;
        }
      } catch (error) {
        setError(error);
      } finally {
        setInProgress(false);
      }
    };
    fetchData();
  }, []);
  return { data, error, inProgress };
};

return (
	<>
		{inProgress && (
			<LoadingMessage>Loading...</LoadingMessage>
		)}
		<StyledImage source={data?.message ? { uri: data.message } : null />
		<ErrorMessage>{error?.message}</ErrorMessage>
	</>
)

❗ 자주 사용되는 부분을 분리해 Hooks로 만들면 깔끔하게 재사용이 가능합니다.

 

 

---

 

 

🔎 7장 Context API

컴포넌트가 아니라 전역적으로 상태를 관리하기 위해 Context API를 사용할 수 있습니다.

 

7.1 전역 상태 관리

데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다.

데이터를 사용하는 컴포넌트가 많은 경우 관리하는 상태가 추가되거나 변경되는 경우 모든 과정의 컴포넌트를 수정해야한다는 문제가 있습니다.

→ Context API를 사용해 문제를 해결할 수 있습니다.

 

---

 

7.2 Context API

import { createContext } from 'react'

const UserContext = createContext({ name: "Kim" });

export default UserContext;

 

❓ Consumer

Context 오브젝트는 기본값, Consumer, Provider 컴포넌트를 가지고 있습니다.

Consumer 컴포넌트는 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터를 사용합니다.

💡 상위 컴포넌트 중 Provider 컴포넌트가 없다면 createContext 함수의 파라미터로 전달된 기본값을 사용합니다.

// src/components/User.js
import React from 'react';
import styled from 'styled-components';
import UserContext from '../contexts/User';

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

const User = () => {
	return(
		<UserContext.Consumer>
			{value => <StyledText>Name: {value.name}</StyledText>}
		</UserContext.Consumer>
	)
}

export default User;

// src/App.js
import User from './components/User'

const App = () => {
	return (
		<Container>
			<User/>
		</Container>
	)
}

 

❓ Provider

Provider 컴포넌트는 하위 컴포넌트에 Context의 변화를 알리는 역할을 합니다. value를 받아서 모든 하위 컴포넌트에 전달하고 하위 컴포넌트는 Provider 컴포넌트의 value가 변경될 때마다 다시 렌더링됩니다.

// src/App.js
import UserContext from './contexts/User';

const App = () => {
	return (
		<UserContext.Provider value={{ name: "kim" }}>
			<Container>
				<User/>
			</Container>
		</UserContext.Provider>
	)
}

Provider로 감싸면 User 컴포넌트에서 사용된 Consumer 컴포넌트는 더이상 Context의 기본값을 사용할 수 없기 때문에 Provider에서 value를 선언해주어야 합니다.

Provider 컴포넌트로부터 value를 전달받는 하위 컴포넌트 수에는 제한이 없지만, Consumer 컴포넌트는 가장 가까운 Provider 컴포넌트에서 값을 받습니다.

 

❓ Context 수정하기

// src/contexts/User.js
import React, { createContext, useState } from 'react';

const UserContext = createContext({
	user: { name: '' },
	dispatch: () => {},
});

const UserProvider = ({ children }) => {
	const [name, setName] = useState("Kim");

	const value = { user: { name }, dispatch: setName };
	return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}

const UserConsumer = UserContext.Consumer;

export { UserProvider, UserConsumer };
export default UserContext;

Provider 컴포넌트의 value에 전역적으로 관리할 상태 변수와 상태를 변경하는 함수를 함께 전달하는 UserProvider 컴포넌트를 생성합니다.

해당 UserProvider는 기존의 컴포넌트와 달리 하위에 있는 Consumer 컴포넌트의 자식 함수의 파라미터로 데이터뿐만 아니라 데이터를 변경할 수 있는 함수 dispatch도 함께 전달합니다.

// src/App.js
import { UserProvider } from './contexts/User';

const App = () => {
	 return (
		<UserProvider>
			<Container>
				<User />
			</Container>
		</UserProvider>
	)
}
...

// src/components/User.js
import React from 'react';
import styled from 'styled-components';
import { UserConsumer } from '../contexts/User';

const User = () => {
	return (
		<UserConsumer>
			{({ user }) => <StyledText>name: {user.name}</StyledText>}
		</UserConsumer>
	)
}

→ 간단하게 Provider와 Consumer를 사용할 수 있습니다.

 

상태값을 사용할뿐만 아니라 함께 전달된 세터함수를 사용해 값을 변경할 수 있습니다.

// src/components/Input.js
import React, { useState } from 'react';
import { UserConsumer } from '../contexts/User';

const Input = () => {
	const [name, setName] = useState('');

	return (
		<UserConsumer>
			{({ dispatch }) => {
				return (
					<TextInput
						value={name}
						onChangeText={text => setName(text)}
						onSubmitEditing={() => {
							dispatch(name);
							setName('');
						}}
						autoCorrect={false}
						autoCapitalize="none"
						returnKeyType="done"
					/>
				)
			}}
		</UserConsumer>
	)
}

export default Input;

useState를 사용해 name의 상태 변수를 생성하고 TextInput 컴포넌트에 값이 변경될 때마다 name에 반영되도록 할 수 있습니다. 그리고 dispatch를 사용해 키보드의 확인 버튼을 누르면 TextInput의 컴포넌트에 입력된 값으로 Context의 값이 변경됩니다.

 

---

 

7.3 useContext

useContext Hook을 사용해 Context를 사용할 수 있습니다.

// src/components/User.js
import React, { useContext } from 'react';
import UserContext from '../contexts/User';

const User = () => {
	const { user } = useContext(UserContext);
	return <Text>name: {user.name}</Text>
}
...

// src/components/Input.js
import React, { useState, useContext } from 'react';
import UserContext from '../contexts/User';

const Input = () => {
	const [name, setName] = useState('');
	const { dispatch } = useContext(UserContext);

	return (
		<TextInput
			value={name}
			onChangeText={text => setName(text)}
			onSubmitEditing={() => {
				dispatch(name);
				setName('');
			}}
			autoCorrect={false}
			autoCapitalize="none"
			returnKeyType="done"
		/>
	)
}

useContext를 사용해 편하게 Context를 사용할 수 있습니다.