1. useState useState는 가장 기본적인 Hook이고, 함수형 컴포넌트에서도 가변적인 state를 가질 수 있게 해준다. 만약 함수형 컴포넌트에서 state를 관리해야 하는 일이 발생한다면, useState하용하면 된다. ex) const [value, setValue] = useState("") 단, 1개의 useState는 1개의 상태값만 관리할 수 있기때문에 여러 state를 관리하기를 원한다면 useState를 여러개 사용해야 한다. 2. useEffect useEffect는 react 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 설정할 수 있는 Hook이다. 클래스형 컴포넌트의 componentDidMount, componentDidUpdate 를 합친 형태로 봐도 무..

앞서 포스팅했었지만 다시 복습을 위해서 redux에 대해서 다시 정리한다. redux는 어플리케이션의 클라이언트 쪽 state를 관리하기 위한 이벤트루프이다. action === event reducer === response of event redux는 클라이언트 앱의 복ㅈ바성을 제어하기 위한 하나의 state제어 수단이다. (방법론) 즉 redux는 클라이언트의 종합적인 state를 관리하기 위한 아키텍쳐 방법론이다. redux의 어플리케이션 전체에는 store라는 커다란 하나의 state가 존재하고, 이것이 어플리케이션의 state를 총괄한다. 이 state는 reducer로만 새로운 형태로 바꾸는 것이 가능하다. reducer는 type과 payload를 속성으로 같는 단순 객체인 action 이..

앞서 하위 컴포넌트에서 history를 사용하려면 withRouter를 사용해서 그 기능에 접근해야 한다고 포스팅한적이 있다. 그런데, useHistory로 history에 접근하여 사용하는 코드를 보고 급하게 이 글을 쓰게 되었다. 사실은 이렇다. 원래 를 사용하지 않은 컴포넌트에서는 widthRouter HoC로 감싸주어야 match, location, history를 사용할 수 있었는데, React-router v5.1 이상이 되면서 match는 useParams로, history는 useHistory로, location은 useLocation 이라는 hooks를 통해 접근할 수 있게 되었습니다. 그리고 react-router v5는 v4와 호환되게 개발되어서 이전버젼을 걱정하지 않고 개발할 수 있..

object-fit: fill; 대체되는 요소의 내용이 지정된 너비와 높이에 따라서 이미지가 확대 또는 축소되어 요소를 가득채울 수 있는 크기로 변화되어서 적용된다. 가로세로 비율이 유지되지 않는다. object-fit: contain; 내용이 가로세로 비율을 유지하면서 요소의 크기에 맞게 확대 또는 축소된다. 공백이 생길 수 있다. object-fit: cover; 내용이 가로세로 비율을 유지하면서 요소의 크기에 맞게 확대 또는 축소된다. 공백이 생기지 않고 가능 채워진다. object-fit: scale-down; 과 object-fit: none; 은 알아보지 않겠다.

BrowerRouter는 react-router-dom 라이브러리에 있다. SPA에서는 화면의 일부분만 렌더링을 하기 때문에 react-router-dom을 사용한다. 참고로 react-router-dom에는 BrowserRouter랑 HashRouter 이렇게 2가지가 있는데, HashRouter는 해시(#)를 사용하여 처럼 모든 경로앞에 #를 붙여서 서버요청을 보내지 않게하고 SPA를 수행하게 해주는 것이고, BrowserRouter는 html5의 history API를 사용해서 UI를 업데이트하는 것이다. 보통 request와 response로 이루어지는 동적인 페이지를 제작하므로, 가 보편적으로 사용되어진다.

redux란? 리덕스는 상태의 중앙 관리를 위한 상태관리도구이다. react, angular, vue에서도 사용할 수 있다. 리덕스는 '전역 상태'를 생성하고 고나리하기 위한 라이브러리라고 할 수 있다. 리덕스는 크게 - 저장소: 전역상태를 보관 - 리듀서: 상태 저장소에 접근을 위함. - 액션: 리듀서에 행동을 명령 - 서브스크립션: 저장소에 보관된 상태를 가져옴 으로 나누어져 있다. 저장소(store) : 전역상태를 저장한다. javascript 객체 형태로 저장되어 있으며, reducer를 통하지 않고 접근할 수 없다. 1개의 application에 1개의 store만이 존재할 수 있으며, react에는 index.js에 정의하는 편이다. 리듀서(reducer) : store에 유일하게 접근할 수 ..

Error: Objects are not valid as a React child (found: object with keys {$$typeof, render, attrs, componentStyle, displayName, shouldForwardProp, foldedComponentIds, styledComponentId, target, withComponent, warnTooManyClasses, toString}). If you meant to render a collection of children, use an array instead. react를 실행했는데 해당 에러가 나온다면? react child에 무슨 에러가 생긴것이다. 다양한 이유가 있겠지만 나같은 경우는 styled-compone..

react를 사용하다보면, 다른 주소로 링크를 옮겨야 하는 경우가 있는데, 크게 2가지로 나눌 수 있다. 1. Link를 사용하여 옮기기 2. history 프로퍼티를 사용해서 옮기기. 근데, 하위 컴포넌트인 경우에 history에 접근할 수 없다. 그렇기 때문에 withRouter를 사용해서 상위 라우터의 history와 연결시켜 줄 수 있다. 물론 history말고도 라우트가 아닌 컴포넌트에서 라우터에서 사용하는 객체 - location, match, history 등을 사용하려면, withRouter를 사용해야한다.