리액트 궁금증11 [react-query] 1. react-query와 useQuery알아보기 간단한 사이트의 경우 데이터의 수가 많지 않아서 state와 props만으로도 충분히 만들 수 있다.하지만 대부분의 사이트는 데이터가 많기 때문에 프롭스 드릴링은 발생할 수 밖에 없는데 이러한 상황을 막기 위해 리액트 팀에서는 React-context를 만든다.데이터를 전역으로 관리하면 프롭스드릴링을 방지할 수 있지만 context의 부족한 점을 보완하기 위해서 redux / recooil 등 다양한 상태관리 라이브러리가 등장. 상태관리를 하는 데이터는 2가지로 나눌 수 있다.클라이언트 상태ui의 상태값입력 폼에 입력한 데이터 등서버 상태서버에서 가져오는 데이터를 관리서버 상태는 데이터는 몇가지 특징을 가지고 있다.비동기식 구현서버에서 데이터를 받아오기까지 시간이 걸리기 때문플레이스홀더를 보여주거나 로.. 2024. 6. 17. react-modal을 사용한 모달 만들기 react-modal npm 설치$ npm install --save react-modal$ yarn add react-modal redact-modal의 옵션들 interface Styles { content?: React.CSSProperties | undefined; overlay?: React.CSSProperties | undefined; }// react-modal Styles 옵션에는 content와 overlay가 있다.// content : 모달창 내부영역 디자인// overlay : 모달 외부영역 디자인interface Props { isOpen: boolean; // 모달의 열림을 결정 shouldCloseOnOverlayClick?: boolean | u.. 2024. 6. 2. useReducer 다시 찾아볼것 useReducer 상태관리의 크기가 커지고 관리방식이 복잡해 질때 사용 useState의 대체 const [data, dispatch] = useReducer(diaryReducer, []) useReducer 의 배열의 비구조화 할당에 들어오는 첫번째 인자는 state의 값, 두번째 인자로는 무조건 dispatch를 사용해야한다. -> const [data, dispatch] useReducer 의 인자로는 상태변화를 처리하는 함수를 넣고 두번재로는 state의 초기값을 넣는다. -> useReducer(diartReducer, []) const reducer = (state, action) => { switch ( action.type ) { case "INIT": { return action.da.. 2024. 2. 2. React children 컴포넌트의 자식들을 값으로 받는 Prop function Button({text}){ return {text} } export default Button; button 태그에 {text}라는 prop를 전달하는 컴포넌트를 만듦 import Button from './Button'; function App (){ return ( ) } export default App 를 출력할 수 있다. 단순히 보여주는 값을 다룰 때는 prop를 만드는 것 보다는 children을 활용하는 것이 직관적으로 도움이 된다. function Button({children}){ return {children} } export default Button; Button 컴포넌트에 prop을 childern으로 변경해주고 impor.. 2024. 1. 18. 01 10 리액트 props 는 뭘까 import './App.css'; import Number from './Number'; function App() { return ( // 1번 ); } export default App; //1번. 상위 컴포넌트에서 하위 컴포넌트에게 어떤 값을 이름을 붙여 전달하는 방식 -> props //-> App 컴포넌트에서 Number 컴포넌트로 10이란 값을 전달 // JSX에서 props를 전달할 때는 {}를 사용하여 값을 감싸고, props의 이름을 명시 //props 는 properties의 줄임말 export default function Number(props) { // 1번 console.log(props) //2번 const [number, setNumber] = useState(0) cons.. 2024. 1. 10. 이전 1 2 3 다음
