CodingCredit

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..

React Hook을 배우기 전에, 왜 React Hook을 써야하는지 확실히 짚고 넘어가려고 한다 😆 첫번째, Reuse React Class component 사이에서는 상태와 관련된 로직을 재사용하기 어렵다. props로 넘겨주다보면 코드를 추적하기 어렵고, 레이어로 둘러싸인 래퍼지옥을 볼 가능성이 높다. React Hook? 컴포넌트로부터 상태관련로직을 추상화 할 수 있다. Hook은 계층 변화없이 상태 관련 로직을 재사용할 수 있게 해준다. 두번째, 복잡한 컴포넌트에서의 어려운 상태관리 리액트에서 각 생명주기 메서드는 다양한 로직과 섞여있고, 각 상태관련 로직들은 모든 공간에 있기 떄문에, 이러한 컴포넌트들을 모두 작게 쪼개서 관리하는 것은 불가능하다. React Hook? 이것을 해결하기 위해..

fetch로 받아왔을 때 주의점 API에 접근해서 데이터를 받아오는 등의 동기적으로 이루어져야하는 함수는 componentDidMount()에서 실행한다. 이렇게 받은 데이터로 바꾼 state는 네트워크 속도가 아무리 빠르더라도 초기값을 바꾸지는 못하므로 처음렌더됐을때는 변화된 state값을 반영하지 못한다. 따라서 해당 state를 사용하여 렌더할때는, default값을 주어야 TypeError가 뜨지 않는다. class App extends Component { state = { customers: '', }; //일반적으로 API에 접근을해서 데이터를 받아오는 등의 작업은 componentDidMount()에서 한다. //이 함수는 모든 컴포넌트가 마운트 되었을때 실행된다. 라이프사이..

클라이언트-서버 아키텍처를 공부하면서 종종 듣게 되는 REST, REST API, RESTful 에 대해서 정리하고자 한다. 📖 REST (Representational State Transfer) 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 서버-클라이언트 아키텍처에서는, HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다. REST의 구성요소 자원(Resource): URI 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다. 자원..