히바리 쿄야 와 함께 하는 Developer Cafe

React Router ​ Router Props ​ 브라우저와 리액트앱의 라우터를 연결하게 되면 그 결과 라우터가 history api에 접근할 수 있게 되며 각각의 Route와 연결된 컴포넌트에 props로 match, location, history라는 객체를 전달하게 된다. ​ Match ​ match 객체에는 와 URL이 매칭된 대한 정보가 담겨져있다. 대표적으로 match.params로 path에 설정한 파라미터값을 가져올 수 있다. ​ · path : [string] 라우터에 정의된 path · url : [string] 실제 클라이언트로부터 요청된 url path · isExact : [boolean] true일 경우 전체 경로가 완전히 매칭될 경우에만 요청을 수행 · params : [J..

​ 미들웨어 미들웨어는 아래와 같은 형태의 함수입니다. 아래와 같은 형태인 이유는, action => next(action) 영역에서 store 와 next 를 사용하기 위함입니다. 미들웨어를 작성할 때, 스토어가 필요한 경우가 많이 있습니다. 그리고 next 함수는 리덕스에서 넘겨주는 함수이며, 다음에 호출될 어떤 함수를 의미합니다. const myMiddleware = store => next => action => next(action); 좀 더 이해하기 쉽게 미들웨어의 예를 들어보겟습니다. 두개의 미들웨어가 있고, 스토어를 생성할때 두개의 미들웨어를 등록해주고 있습니다. 그 다음 간단한 액션을 하나 실행하고 있습니다. // 미들웨어 const middleware1 = store => next =>..

리듀서의 형태 const [, ] = useReducer(, , ) reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운 상태(state) 객체를 반환하는 함수입니다. 그리고 dispatch 함수는 컴포넌트 내에서 상태 변경을 일으키기 위해서 사용되는데 인자로 reducer 함수에 넘길 행동(action) 객체를 받습니다. 행동(action) 객체는 관행적으로 어떤 부류의 행동인지를 나타내는 type 속성과 해당 행동과 괸련된 데이터를 담고 있습니다. 다시 말해, 컴포넌트에서 dispatch 함수에 행동(action)을 던지면, reducer 함수가 이 행동(action)에 따라서 상태(state)를 변경해줍니다. import React, { useReduc..

context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. 예를 들어, 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마(theme) props를 명시적으로 넘겨주고 있습니다. ​ class App extends React.Component { render() { return ; } } function Toolbar(props) { return ( ); } class ThemedButton extends React.Component { render() { return ; } } context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도..

1. Mount 마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미 ​ ​ ■ constructor : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수 ​ ■ getDerivedStateFromProps : props와 state 값을 동기화할 때 사용하는 함수로 리액트 v16.3 이후에 만들어진 함수 ​ ■ render : 컴포넌트의 기능과 모양새를 정의하는 함수로 리액트 요소를 반환 ■ componentDidMount : 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수 ​ 2. 업데이트 ​ 컴포넌트가 업데이트 될 때 실행되는 함수들을 살펴보겠습니다. 컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌..