[React] 반응형 웹

반응형 디자인을 위해 종횡비에 따라 state를 할당하여 사용하였습니다.
데스크탑 / 모바일 2가지 모드를 감안하여 세로모드, 가로모드로 나누었습니다.

---

function App() {
  const [landscapeMode, setLandscapeMode] = useState(false);

  useEffect(() => {
  	const handleResize = () => {
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      if (viewportWidth > viewportHeight){
        setLandscapeMode(true);
      } else{
        setLandscapeMode(false);
      }
    };

    window.addEventListener('resize', handleResize);

    // 초기 사이즈 설정
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const theme = {
    landscapeMode: landscapeMode
  };

  return(
    <ThemeProvider theme={theme}>
      <Wrap />
    </ThemeProvider>
  );
}

• viewport의 비율을 계산해서 state로 가로/세로 모드의 boolean값을 설정합니다.
• ThemeProvider에 해당 state를 할당하면 하위 컴포넌트 어디에서든 사용할 수 있습니다.
• 다크모드, 모바일모드 등 여러 모드를 사용할 경우를 생각하여 ThemeProvider에 landscapeMode를 바로 할당하지 않고 theme 객체를 만들어서 사용했습니다.
  theme객체에 다른 테마에 필요한 변수를 담아 theme.darkMode.color 와 같이 사용할 수도 있습니다.

const Main = styled.div`
  margin-bottom: ${props => props.theme.landscapeMode ? '1vw' : '2vw'};
`;

const Pro = styled.div`
    ${props => props.theme.landscapeMode ? css`
        padding: 0.2vw 0.5vw;
        border-radius: 0.5vw;
    ` : css`
        padding: 0.6vw 1.5vw;
        border-radius: 1.5vw;
    `}
`;

위와 같이 styled-component 구문에서 해당 값을 이용해 css 변화를 주어 반응형 웹을 구현할 수 있습니다.