안녕하세요~ totally 개발자입니다. Navbar, Link 오늘은 Navbar(Navigation Bar)를 Link 활용해서 만드는 방법에 대해 살펴보겠습니다. Step 1: 먼저 Header.js 파일을 작성해서 다음처럼 만들어줍니다. (생략하셔도 됩니다) Step 2: Nav.js 파일을 생성하여 다음처럼 Link를 이용한 메뉴를 구성합니다. Step 3: Nav.css 파일도 생성하여 다음처럼 스타일링 해주면 됩니다. text-decoration: none을 사용해서 anchor 태그에 기본적으로 탑재되어 있는 밑줄 표시를 제거해줍니다. Step 4: App.js에 다음처럼 업데이트해주시면 됩니다. 결과는 아래와 같습니다. 각 메뉴를 클릭하면 지정된 페이지(컴포넌트)로 이동합니다.

안녕하세요~ totally 개발자입니다. Router 오늘 살펴볼 부분은 Router입니다. 라우터란 여러 페이지가 있을 때 각 페이지로 갈 수 있도록 도와주는 기능입니다. Main.js, About.js, Contact.js 3개의 컴포넌트가 있을 때 이 3개의 페이지(컴포넌트)로 라우팅해보도록 하겠습니다. Step 1: 먼저 component 폴더 내에 About.js, Contact.js, Main.js 파일을 각각 만들어줍니다. Step 2: App.js에 다음처럼 입력해줍니다. 중요한 것은 태그로 감싸주신 뒤 안에 각 태그를 만들어주셔서 path와 element 부분에 함수 이름을 지정하면 됩니다. Step 3: 만약에 react-router-dom이 설치되어 있지 않다면 Terminal 열어주..