Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

데이터를 axios로 받아온 후 화면에 띄우기 위해 아래처럼 코드를 작성했다. {data.map((item) => ( ... {item.roomNumbers.map((roomNumber) => ( {roomNumber.number} ))} ))} 받아온 data 안에 있는 roomNumbers 배열을 map 메서드를 이용해 JSX를 생성하고 방번호를 출력하려고 한다. 에 type을 checkbox로 넣으면 체크박스가 생성되고 value는 체크가 되었을 때 전달되는 값을 말한다. 나는 roomNumbers 배열 안에 있는 _id 값을 확인하고 싶어 value에 _id를 넣었고, onChange이벤트로 체크박스 상태가 변경되었을 때 handleSelect 함수를 호출했다. const [selectedRoom..

2023. 6. 29.

React, Next

프로젝트를 하다가 셀렉트 박스에서 값을 선택하면 상위 컴포넌트로 값을 넘겨줘야 할 일이 생겼다. 리액트에서 보통 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 props를 통해 값을 전달할 수 있지만, 하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 때 props로 넘겨줄 수 없다. 이럴땐 전역 상태관리를 사용할 수도 있지만 거쳐야 하는 단계가 많지 않다면 상위 컴포넌트에서 하위 컴포넌트로 콜백함수를 props로 전달하고 하위 컴포넌트에서 해당 콜백함수를 호출해서 props로 전달할 수 있다. // 상위 컴포넌트 import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; function ParentComp..

2023. 6. 22.

React, Next

리액트로 간단한 날씨 위젯 만들기! 1. OPEN API 사용하기 https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweathermap.org 먼저 위 주소 회원가..

2023. 6. 18.

React, Next

1. Context API란? 컴포넌트간에 데이터를 전역적으로 공유하고 전달할 수 있고, 중간 컴포넌트를 거치지 않고도 데이터를 전달 할 수 있다. 2. useReducer란? 리액트에서 상태관리를 위해 사용되는 훅으로 useReducer를 사용하면 복잡한 상태 로직을 분리하고 관리할 수 있다. Context API와 useReducer를 함께 사용하면 Context API로 전역 상태를 제공하고 useReducer로 상태를 업데이트 하는 로직을 구현할 수 있어서 상태관리가 편해지고 컴포넌트 간 데이터 전달이 용이해진다. 3. 초기 상태 정의 후 컨텍스트 생성 import { createContext, useReducer } from "react"; const INITIAL_STATE = { city: ..

2023. 5. 31.

React, Next

useLocation과 useNavigation은 React Router에서 제공하는 훅으로 라우팅 관련 기능을 사용할 때 유용하다. 1. useNavigation const navigate = useNavigate(); const handleSearch = () => { navigate("/hotels", { state: { destination, date, options } }); }; useNavigation은 페이지를 이동하면서 값을 전달하고 URL경로를 변경하는데 사용한다. navigate 첫번째 인자로 이동할 경로, 두번째 인자로 state객체를 전달한다. handleSearch() 함수가 호출되어 /hotels 경로에 들어갈 때 state 객체를 포함해서 /hotels 페이지에 전달할 수 있..

2023. 5. 30.

React, Next

훅(Hook) 설명은? 👉 [React] React Hooks 여기서 확인하기! [React] React Hooks 1. Hook 이란? 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect) 하기 위해 사용 useState가 바로 State Hook! 기존에는 컴포넌트 내에서 State와 생명주기(lifecycle features)를 관리 jisilver-k.tistory.com 1. Custom Hooks 자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용이 가능하다. UI 요소의 재사용성을 올리기 위해 컴포넌트를 만드는 것 처럼, 로직의 재사용을 높이기 위해서 커스텀 훅을 제작한다. * 한 로직이 여러번 사용될 경우 함수를 분리하는 것처럼 Hook을 만드..

2023. 5. 28.