CodingCredit

Redux의 state와 React의 component를 연걸하는 방법에는 다음 두가지 방법이 있다. connect parameter를 통해 mapStateToProps, mapDispatchToProps와 같은 메소드를 이용하는 방법 Redux hooks의 useSelector(), useDispatch() 메소드를 이용하는 방법 이 중, Redux hooks가 좀더 최근에 나온 방법이고 직관적인 방법이다. useSelector() useSelector()는 컴포넌트와 state를 연결하는 역할을 한다. 컴포넌트에서 useSelector메소드를 통해 store의 state에 접근할 수 있다. const { postList } = useSelector(store => store.post.postList)..

redux는 강력한 상태관리 라이브러리다. React와 함께 자주쓰이기지만, React에 종속된 라이브러리는 아니며, Augular, jQuery, vanilla JavaScript 등과 함께 다양하게 쓰일 수 있다. Flux 구조 Flux는 Facebook에서 만든 client-side web applications을 구축할 때 사용하는 application architecture(앱 구조), design pattern(디자인 패턴)이다. MVC (Model–View–Controlle)구조 의 단점을 보완할 목적으로 개발된 Flux는 대규모 프로젝트에서 너무 복잡해지는 MVC구조의 단점을 보완하는 단방향 데이터 흐름(unidirectional data flow)의 구조이다. 리덕스는 Flux의 구현체라..

🚨오늘의 실수 API로 데이터를 받아와서 처리할 때, 항상 mutable한지 immutable한지 생각하고 처리하자! 데이터는 죄가없었다..다 내탓이오. 구조분해할당에서 해당 property의 변수이름 설정하기 API로 받아온 데이터의 형태가 다음과 같을 때, {data: {results: [원하는 데이터] } }원하는데이터를 데이터에 저장된 results가 아닌, userdata라는 원하는 변수에 할당하고 싶다면 다음과같이 작성하면 된다. const{ data: {results: userdata }} = API로 받아온 데이터 전체 자바스크립트는 객체를 축약형으로 할당할 수 있다. this.setState({ userData, loginData }) this.state에 userData라는 proper..

What is withRouter ? withRouter는 Router가 아닌 컴포넌트에 Router 특성을 부여한다. Router는 location, match, history를 사용한다. location location 객체에는 현재 페이지의 정보가 들어간다. pathname: 현재 페이지의 경로명 search: 현재 페이지의 query String hash: 현재 페이지의 Hasy match 와 URL이 매칭한 정보가 담겨있다. path : 라우터에 정의된 path url : 실제 클라이언트로 부터 요청된 url path isExact : true일 경우 전체 경로가 완전히 매칭될 경우에만 요청을 실행 params : url path로 전달된 파라미터 객체 history 브라우저의 history와 ..

Why React Router? 리액트로 라우팅을 구현하는 방법이 무엇이 있을까? 가장 쉽게 떠올릴 수 있는 방법은, 이벤트에 따라 상태를 달리주고 새로 렌더시키는 것이다. 그러나 이렇게하면 사용자입장에서 다음과 같은 문제가 발생하게된다. 특정 페이지에 대한 즐겨찾기 등록이 불가능하다. 컴포넌트가 전환되더라도 브라우저 주소창의 URL은 고정되어 있기 때문이다. 뒤로 가기 버튼을 누르면 해당 앱내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버린다. 새로 고침 버튼을 누르면 사용 중이던 컴포넌트가 아닌 무조건 최초에 렌더링되었던 Home 컴포넌트로 이동한다. 또한 SEO(검색 엔진 최적화) 측면에서도 일반 웹사이트들과 차이가 있어서 검색 엔진에 의해 원치않는 방식으로 색인..

State Hooks const [item, setItems] = useState([]);여기서 item은 state 변경 이전의 값으로 고정된다. 따라서 비동기와 관련된 고민을하지 않아도 된다! useState의 인자를 전달하여 초기값을 설정할 수 있다. useState(1) → item === 1; useState의 두 번째 요소에 값을 전달하는 것이 일반적인 사용 방식인데, 함수도 쓸 수 있다. import React, { useState } from "react"; const Example = () => { const [count, setCount] = useState(0); return ( 클릭한 횟수: {count} 번 setCount(count + 1)}> ); }; export defaul..