반응형 React15 [React] 리액트 반응형 useMediaQuery 리액트 디바이스 자체의 화면 폭을 확인해서 true/ false를 반환해주는 useMediaQuery 리액트 전용 훅을 사용할 수 있다. 디바이스 폭 기준이라, 창을 늘리거나 줄여도 반응하지 않는다.그래서 모바일,태블릿, pc 같이 디바이스 자체를 가늠하려는 경우 사용하면 유용하게 쓸 수 있음 1. install 필요함 터미널창에서 react-responsive 설치npm install react-responsive 2. import 해주기 import { useMediaQuery } from "react-responsive"; 3. 변수 세팅 const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" }); const isMobile =.. 2024. 8. 30. [React] useContext api useContext 훅은 어떻게 사용할까?리액트의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 '단방향'으로 흐른다. 엄청 큰 컴포넌트 트리가 있다고 가정할 때 공통적으로 필요한 전역적인 데이터가 있을 수 있다. 예를 들어 userdata전역 데이터를 일일이 props로 단계별로 전달해야 한다면 정말 비효율 적이다.리액트는 이러한 문제점을 해결해 주는 Context API를 제공한다.Context는 앱 안에서 전역적으로 사용되는 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. Context를 사용하면 Props로 데이터를 일일이 전달해 주지 않아도 해당 데이터를 가지고 있는 상 위 컴포넌트에 그 데이터가 필요한 하위 컴포넌트가 접근할 수 있다. 즉 사용자 .. 2024. 8. 27. [React] Expandable BottomSheet 구현하기 디자이너님이 이렇게 위아래로 움직이게 해주세요 요청하셨을때 이거 너무 쉽게 생각하고 네 금방할게요 이러면서 덤벼들었다가 눈물 날뻔했다...생각보다 블로그 글이 없어서 1차 당황했고 tailwind css 사용하신 분들 없어서 대충 추측하면서 한다고 2차 당황함 무엇보다 코드가 왜 이렇게 길고.. 만들어야 하는 파일들이 많은건지... 업무 중간에 머리 깨질거 같아서 뛰쳐나가고 싶은거 꾹 참았음ㅋㅋㅋ그래도 하나 잘 만들어놓으면 두고두고 여기저기 잘 쓸 수 있음! 여튼 기록해야지... ✔️Bottom sheet 바텀시트 란? 화면 하단에 위치하며 스크롤을 사용자가 드래그로 펴고 닫을 수 있는 화면을 의미한다. 보통 추가적인 정보나 액션을 제공하기 위해 사용된다. 총 2개의 영역으로 구분이 되는데 • 바텀시.. 2024. 8. 21. [React]useReducer useState처럼 상태관리, 상태 업데이트 hook이다.변경할 값이 많을때 상태 업데이트 즉 상태 관리할 데이터가 많아질때 사용하면 디버깅이 편하며 구조화된 방식으로 상태를 관리하고 싶을때 사용할 수 있다. 선언형태 :const [state, dispatch] = useReducer(reducer, initialState); state : 상태이름 (컴포넌트에서 사용할 상태) -> 빵 담는 접시 dispatch : state를 변경 시 필요한 정보를 전달하는 '함수' -> 주문서reducer: dispatch를 확인해서 state 변경해주는 함수-> 주방(공장)initialState: state에 전달할 초기 값-> 빵 및 재료등 개수 설정 reducer()와 action에 대해서reducer().. 2024. 8. 20. 이전 1 2 3 4 다음 728x90 반응형
