React18 [React] 리액트 JSX에서 이미지가 엑박으로 나올 때 문제점 리액트에서 이미지를 표시하기 위해 아래와 같이 코딩하면 이미지가 로드되지 않고 엑박으로 나온다. 구글링한 결과 require()를 사용하면 해결된다 한다. 하지만 아래와 같은 경우에도 엑박으로 나왔다. 2021.04.09 해당 문제도 해결했다. require() 함수에 default를 붙이니 해결됐다. require만 붙이면 이미지가 아닌 객체가 return되기 때문이었다. default를 붙이면서 이미지 자체를 불러올 수 있다. 오류 수정 참고한 페이지) stackoverflow.com/questions/62244118/require-local-image-in-react Require local image in React I am trying to load local JPG image by it.. React 2021. 3. 30. 더보기 ›› [React] TypeError: Cannot read property 'location' of undefined 문제 및 원인 리액트 웹 개발 중 TypeError: Cannot read property 'location' of undefined 오류가 났다. props의 history를 읽지 못하는 오류였다. 해결책 history, location, match는 라우터에서 사용하는 객체이므로 컴포넌트에서 사용하려면 withRouter를 이용해서 export 해야 한다. 기존 export default 클래스 이름; 변경 import { withRouter } from 'react-router-dom'; export default withRouter(클래스 이름); 깨달은 점 export 할 때 항상 withAlert, whthRouter, connect 등을 썼는데 이유도 모른 채 썼다. 함수를 사용할 때 어떤 .. React 2021. 3. 29. 더보기 ›› [React] Link와 <a>태그의 href의 차이 리액트에서 페이지를 이동할 때는 태그의 href 대신 Link를 사용해야 한다. 이유 태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다. 리액트는 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 프레임워크로 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. 해당 이유로 페이지를 새로 불러오게 되면 앱이 지니고 있는 상태가 초기화되고, 렌더링 된 컴포넌트도 모두 사라지고 새로 렌더링을 해야 한다. 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다. 태그의 href는 페이지를 이동시킬 때 페이지를 새로 불러오게 된다. 따라서 상태.. React 2021. 3. 29. 더보기 ›› 이전 1 2 3 4 다음
