Context API를 사용하여 전역 값 관리하기 App 컴포넌트에서 onRemove, onToggle 함수가 있고 App -> UserList -> User 이렇게 전달이 되는 구조일 때 사실상 UserList에서는 onRemove, onToggle 함수가 직접적으로 사용이 되지 않음에도 불구하고 User 컴포넌트에게 전달해주기 위해서 App에서 props로 받아와서 User 컴포넌트에게 전달해주고 있습니다. 다리역할만 하고 있는 것이죠. 지금 같은 상황은 크게 문제가 되지 않으나 컴포넌트의 구조가 복잡해진다면 이런 구조로 계속 하위 컴포넌트에 전달이 되는 구조로 작성한다면 난해해질 것입니다. 이런 상황은 Context API를 사용하여 해결할 수 있습니다. import React from "react..

Custom Hook 만들기 컴포넌트를 만들다 보면 반복되는 로직이 발생합니다. 예를 들면 인풋 값을 바꾸어주는 로직의 경우, 항상 event.target에서 name과 value를 받아와서 그 값을 변경해준다는 로직이 같습니다. 이렇게 반복되는 로직은 기존의 Hook들을 응용해서 커스텀 Hook을 만들 수 있습니다. 인풋 상태를 관리하는 커스텀 Hook 만들어보기 import React, { useCallback, useState } from "react"; const useInputs = (initialForm) => { const [form, setForm] = useState(initialForm); const onChange = useCallback((event) => { const { name..

useReducer 리액트의 컴포넌트에서 상태를 업데이트 하기 위해서는 useState를 사용해서 상태(state)를 관리했었습니다. 그런데 useState 말고도 상태를 관리할 수 있는 방법이 있는데 바로 useReducer 입니다. useState와 useReducer의 차이? useReducer를 사용하면 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있을 뿐만 아니라 심지어는 아예 다른 파일에 작성한 후 불러와서 사용할 수도 있습니다. import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const o..

Switch 라는 태그는 자식인 들 중에서 현재 URL과 일치하는 첫번째 것을 렌더해준다. import React from "react"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import "./app.css"; import Home from "./components/home"; import Profile from "./components/profile"; function App() { return ( ); } export default App; 이렇게 작성하면 경로에 맞는 컴포넌트를 렌더해주는 것이다. Link Switch 안에서가 아니더라도 Link를 이용하면 원하는 컴포넌트로 이동할 수 있다. (마치 html의 a 태그의..

react-router에서 해당하는 경로에 맞는 컴포넌트를 렌더하는 방법은 3가지가 있다. 1. 의 자식으로 렌더하는 방법 import React from "react"; import { BrowserRouter, Link, Route} from "react-router-dom"; import "./app.css"; import Home from "./components/home"; import Profile from "./components/profile"; function App() { return ( ); } export default App; 하지만 위와 같이 쓰면 route 관련 props인 location, history, match를 받아올 수 없다. 2. 를 이용하여 렌더하는 방법 impo..

라우터가 아닌 컴포넌트에서 location, match, history를 사용해야할 때에는 withRouter를 사용한다. const callback = withRouter(() => { }); 이렇게 withRouter로 감싸도 되고, export default withRouter(callback); 이렇게 감싸면 된다. 그러면 props에서 location, match, history를 받아올 수 있다. * 라우터가 아닌 컴포넌트에서 어떤 이벤트가 발생했을 때 URL을 이동할 일이 있을 때 history.push를 이용해서 URL을 이동하고 싶었기 때문에 withRouter를 찾게 되었다.