React

Route

(준비) npm install react-router-dom : 리액트에서 라우팅 가능하게 해주는 모듈 install한다.

<react-router-dom의 컴포넌트들>

• BrowserRouter : 브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할이다. 이 컴포넌트를 최상위 태그에 감싸주면 된다.
• Routes : 자식 route들을 구성하고 있는 단위이다.
• Route : 특정 주소에 컴포넌트 연결한다.

<Route path="주소규칙" component={보여주고싶은 컴포넌트}> // 컴포넌트 방식
<Route path="주소규칙" component={() => JSX}> // JSX 렌더링 방식

=> JSX 렌더링 방식을 이용하면 props나 기타 값들을 전달할 수 있다.

• Switch : 여러 Route 들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다.
• Link : 클릭을 통해 다른 주소로 이동시킨다.

<Link to='주소규칙'>자식</Link>

<아예 다른 주소로 이동하는 방법>

<a href="...">...</a>

=> 주의점으로는 페이지를 아예 새로 불러오기 때문에 리액트 앱이 지니고 있는 상태들도 초기화되고 렌더링된 컴포넌트도 모두 사라진다. (비추천)

(실습) 3개 페이지 라우팅
3개의 컴포넌트를 만들어 URL에 따른 라우트 3개를 생성해 3개의 페이지를 보여주는 실습

3개 컴포넌트 중 하나 (first, second, home). 다 같은 형식으로 만들어 준다.


App.js에서 라우팅 하기! 처음에 BrowserRouter 컴포넌트를 씌어주는 걸 까먹어서 3번이나 갈아 엎었다...ㅎ

<결과>


클릭하면 페이지가 변하는 것을 볼 수 있다. (자세하게는 클릭된 컴포넌트의 뷰를 보여주는 것)

CSS

• pure css
  css 파일에서 작성, import해서 사용한다.
• scss
  기존 css 불편한 점 개선한 새로운 css이다.
• Styled-components
  CSS-IN-JS로, css를 js안에서 작성 할 수 있게 해준다.
  형식 : styled.[사용하고싶은 태그] `` (백틱)

figma 사용법