개발자
테일윈드 + react 사용 중인데 반응형을 어떻게 구현하면 좋을까요?
안녕하세요 ! 테일윈드 + react로 간단한 투두프로젝트 진행 중인데 반응형을 구현하던 도중 궁금한 점이 생겨서 질문드립니다. 최대 뷰포트 480 이하부터만 특정 컴포넌트(시계, 제목)는 안보이게 하고 기존의 투두리스트 입력할 input, 투두리스트 ul 목록들, 날짜만 보이도록 구현하고 싶은 상황입니다. 480 이상일 때는 위의 말한 컴포넌트들이 모두 보이는 상황입니다! 테일윈드 반응형을 하게 되면 특정 뷰포트일 때만 아예 안보이도록도 구현할 수 있나요? 가능하다면 특정 컴포넌트는 안보여야 하다보니 기존에 구현에 놓은 ui가 안깨지고도 가능한건지, 아니면 직접 재설정 해줘야하는건지도 궁금합니다! 테일윈드 반응형에 익숙치 않아서 어렵네요 ㅠㅠ 위와 같은 고민으로 다른 방법을 찾다보니 useMediaQuery 가 있어서 설치해보고 사용중인데 테일윈드의 단점인 클래스명 길어지는 것, 일일히 태그마다 지정해서 사용해줘야한다는 것을 해결해 줄 수 있을 것 같았는데 특정 컴포넌트가 아예 안보이게 하다보니 조건부렌더링으로 해서 코드가 길어지고, 480 이하 일때 안보이기는 하나 ui가 모두 다 깨져서 결국엔 다시 테일윈드로 레이아웃을 맞춰주게 되더라구요.. 코드로 예를 들자면 import { useMediaQuery } from 'react-responsive'; function TodoHead() { const isSmallScreen = useMediaQuery({ query: '(max-width: 480px)', }); return ( !isSmallScreen && ( <div> <h1 className="mt-[100px] text-center text-6xl font-bold text-white"> Todo List </h1> </div> ) ); } export default TodoHead; 이와 같이 짜둔 상황인데 480 이하일 때는 의도대로 제목이 안보이기는 하나, 해당 컴포넌트가 사라지면서 모든 ui가 깨지니까 결국엔 다시 레이아웃을 조정해야하는 상황인거죠 ㅠㅠ 테일윈드 단점을 해결하고자 쓴건데 좋은 방법이 아닌 것 같기도하고.. 사실 초보라서 사용하던 테일윈드를 활용해서 해결 가능한건지, useMediaQuery 이게 좋은 방법인지도 아닌지도, 아님 굳이 사용할 필요가 없는건지.. 잘 판단이 안서는 상황이네요..ㅎㅎ 도와주세요 선배님들의 조언이 필요합니다 !!
답변 1
인기 답변
답은 공식문서에 있습니다. https://tailwindcss.com/docs/responsive-design 참고하시기 바랍니다. 또한 간단한 구현의 경우 Chatgpt로 효율적으로 학습하실 수 있습니다. v4 되도록이면 구매하셔서 활용하시는 것을 추천 드립니다. 아래는 ChatGpt로 해당 질문 글을 올렸을 때의 답변입니다. Tailwind CSS는 반응형 디자인을 지원하기 때문에, useMediaQuery를 사용하지 않고도 Tailwind의 유틸리티 클래스를 이용하여 조건부 렌더링을 구현할 수 있습니다. 480px 미만의 뷰포트에서 특정 컴포넌트(시계, 제목 등)를 숨기고 나머지 요소(입력 필드, 투두 리스트, 날짜 등)는 표시하는 것을 원한다면, Tailwind의 hidden 클래스와 반응형 접두사를 사용할 수 있습니다. 아래 코드는 Tailwind CSS를 사용하여 이러한 요구 사항을 구현하는 방법을 보여줍니다 이 예시에서는 sm:block 클래스를 사용하여 480px 이상의 뷰포트에서 컴포넌트를 표시하고, hidden 클래스로 480px 미만에서는 숨깁니다. Tailwind CSS의 반응형 접두사(sm:, md:, lg:, xl:, 2xl: 등)를 사용하여 다양한 뷰포트 크기에 따른 스타일을 적용할 수 있습니다.
1function TodoHead() {
2 return (
3 <div>
4 {/* 이 부분은 480px 이상의 뷰포트에서만 보입니다. */}
5 <h1 className="hidden sm:block mt-[100px] text-center text-6xl font-bold text-white">
6 Todo List
7 </h1>
8 {/* 여기에 다른 컴포넌트를 추가할 수 있으며, sm:block을 사용하여 480px 이상에서만 표시됩니다. */}
9 </div>
10 );
11}
12
13export default TodoHead;익명
작성자
2023년 11월 20일
gpt도 이용했는데 제가 질문 능력이 부족했는지 원하는 답변을 얻지 못했었거든요.. 알려주신 방법대로 테일윈드로 다시 적용해서 코드 수정을 해봐야겠습니다. 답변 감사합니다 !
백승훈
프론트 엔드 개발자 (FE) • 2023년 11월 21일
질문하실 때 베이스 기술이나 항목을 알고 있으면 그쪽으로 작성해보라고 적어보시면 도움이 됩니다 👍 차크라 UI나 테일윈드 둘 다 사용해봤는데 편리하고 좋은 기술이라 생각해요 파이팅입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 11월 20일
Tailwind CSS는 반응형 디자인을 구현하는데 있어 유용한 도구를 제공합니다. "sm", "md", "lg", "xl", 그리고 최근 추가된 "2xl"과 같은 미리 정의된 미디어 쿼리를 사용하면 각 뷰포트에 따라 다른 스타일을 적용할 수 있습니다. 여러분의 경우에서는, 특정 컴포넌트(시계, 제목)가 480px 이하의 뷰포트에서만 안 보이게 하려고 합니다. Tailwind CSS에서는 이를 위해 'hidden' 클래스와 조합하여 사용할 수 있습니다. 다음은 예시 코드입니다: ```jsx <div className="sm:hidden"> <h1>이 부분은 640px 이상의 화면에서 보입니다</h1> </div> ``` 위 코드를 사용하면, 화면 크기가 작아질 때 특정 컴포넌트로 인해 UI가 깨지는 문제도 해결할 수 있습니다. 이것이 왜냐하면 실제로 요소가 사라지는 것이 아니라 단지 보이지 않게 되기 때문입니다. useMediaQuery와 같은 접근 방식도 반응형 디자인을 구현하는데 도움이 될 수 있는 방법 중 하나입니다. 그러나 이러한 접근 방식을 사용하면, 반응형 디자인을 위해 다양한 뷰포트 크기에 대한 처리가 필요한 모든 컴포넌트에서 이러한 논리를 반복해야 할 수도 있습니다. Tailwind CSS의 경우 해당 스타일을 직접 HTML에 적용하기 때문에 이런 문제를 피할 수 있습니다. 동적으로 클래스 이름을 추가/제거하는 것보다 좀 더 간결하고 직관적인 코드를 작성할 수 있기 때문입니다. 따라서 특정 조건에서 컴포넌트를 표시/숨김 처리하는 것이라면, Tailwind CSS의 반응형 기능을 활용하는 것이 좋아 보입니다. 이렇게 함으로써 여러분은 복잡한 JavaScript 로직 없이도 깔끔하게 반응형 디자인을 구현할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!