리엑트 라우터를 이용하여 Link 에 연결된 페이지를 출력하고 싶은데 해당 에러가 계속 나왔다 이게 도대체 무슨 에러일까 생각을 해보다 원인을 모르겠어 구글링을 하였을때 쉽게 나왔다. 리엑트 라우터를 사용할때 index.js 파일에 BrowserRouter 라는 테그로 감싸야 합니다. 간단한 에러인데도 정말 고민을 많이했다 그런데 쉽게 나와서 다행이다. 리엑트 라우터를 사용할때 BrowserRouter 태그를 최상단 컴포넌트에 감싸야한다는것을 잊지 말자

클래스형 컴포넌트 앞써 보았던 App 컨포넌트는 함수형 컴포넌트이며 코드가 다음과 같이 이루어져 있습니다. function App() { const name = "React"; return ( {name} ); } export default App; 컴포넌트를 선언하는 방식은 두가지 입니다. 하나는 함수형 컴포넌트이고 또 다른 하나는 클래스형 컴포넌트입니다. App.js 컴포넌트를 다음과 같이 변형시켜 봅시다 import React, { Component } from "react"; class App extends Component { render() { const name = "react"; return {name}; } } export default App; 클래스형 컴포넌트로 바꿔였지만 역활은 이전..

JSX (JS+XML) 자바스크립트의 확장 문법이며 XML 과 거의 비슷합니다. 이렇게 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변형이 됩니다. function App(){ return ( Hello ); } 이렇게 작성된 코드가 다음과 같이 변환 됩니다. function App(){ return React.createElement("div",null,"Hello ",React.createElement("b",null,"react")); } 만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매무 불편할 것입니다. JSX를 사용하면 UI를..

현재 근무를 하고 있는 사내의 기술 포지션이 React(front-end),express(Back-end),MongoDB(database)로 사용이 되면서 지금은 back-end개발을 담당하고 있지만 앞으로 front-end 영역까지 업무 전달이 될것 같아 React를 공부를 해야겠다라고 생각을 했다. 이번 기회에 front-end 개발을 경험할수 있는 좋은 기회라고 생각하여 열심히 공부를 하려고 합니다. React 를 공부를 하기전에 HTML,CSS,Javascript 내용을 복습을 해었고 React를 공부하면서 Javascript의 부족한 부분이 있으면 그때 마다 공부하는것으로 생각을 하고 있습니다. 이번 블로그에서는 React 처음 공부하면서 왜 사용을 하면 React 렌더링의 원리인 Virtaul..