[React Native] Context를 이용해 Component의 style 설정하기 (useContext)

Context

Context를 사용하는 이유는 무엇일까?

어떤 컴포넌트에서든지 상관없이 공통된 자료를 사용하기 위함이다.

 

Context를 통해서는 App 전체적으로 적용되어야 할 색상이나, 글씨체, size등을 공유한다.

 

Styled Component를 사용하면 theme를 받아서 아래와 같이 사용할 수 있다.

const Container = styled.View`
  background-color: ${({ theme }) => theme.background};
`;

theme.background로 어디에서나 동일한 배경색을 사용할 수 있다.

 

Context를 사용해 Component의 style설정하기

그런데 Component에 style로 직접 설정해야 할 경우가 있다.

<Text
    style={{ color: "black" }}
    // style={{ color: ${({ theme }) => theme.main} }} // 적용불가능
>Title</Text>

보통 style을 설정하는 object에서는 속성의 값으로 ${({ theme }) => theme.main}나 theme.main을 사용할 수 없다.

 

${({ theme }) => theme.main}을 사용한 경우에는 SyntaxError

theme.main을 사용한 경우에는 ReferenceError가 나온다.

 

이런 경우에는 어떻게 해야할까?

useContext와 ThemeContext를 사용해서 return 안에서 theme을 사용할 수 있다.

import React, { useContext } from "react";
import styled, { ThemeContext } from "styled-components/native";
 
const App = () => {
  // Context를 사용하기 위한 코드
  const theme = useContext(ThemeContext);
 
  return (
    <Container>
      <Text
        style={{ color: theme.main }}
      >Title</Text>
    </Container>
  );
};
 
export default App;
 

const theme = useContext(ThemeContext); 라는 코드를 App 내에 작성해주면 theme를 자유롭게 사용할 수 있다.

 

 

강의 출처

https://inf.run/yg1i

처음 배우는 리액트 네이티브 - 인프런 | 강의