Today I Learned
[Front-End] - React
오늘은 깃허브에서 클론 후 자신의 레포지토리에 커밋하고 푸쉬하는 법, 그리고 리액트에서
props와map함수사용법 그리고react-router-dom라이브러리에 대해 배웠다.
github먼저 깃허브에서 다른 사용자의 레포지토리를 클론해서 내 레포지토리에 커밋하고 푸쉬하는 법도 배웠다. 먼저
git clone을 해준 다음git bash에서 해당 레포지토리 위치로 이동 후rm -rf .git명령어를 입력하고git init부터 차례로 푸쉬까지 하면 된다.
props
props를 사용하면 컴포넌트의 재사용성을 높일 수 있다.
props는props.[value명]으로 쓰이지만{value}와 같이구조분해된 형태로도 많이 사용된다.
SPA
SPA란Single Page Application의 약자로 리액트에서 페이지를 구성하는 기술이다.
SPA는 먼저 서버에 접속하였을 때 모든 정적 리소스(HTML, CSS, JS)를 다운받는다.
업데이트가 필요한 부분에 있어서 데이터(JSON)만 전달받아 업데이트를 하게 된다.
React Router
React Router는 먼저npm i react-router-dom명령어를 통해 설치한다.
보통App.jsx에서 가장 바깥 컴포넌트를BrowserRouter로 감싼다.
그 후 모든 페이지에 공통적으로 적용되는 요소를 작성한다.(<div>,Header,Footer)
라우팅이 되는 페이지들을Routes안에 배치한다.
Route에 경로(path)와 페이지element를 배치시킨다.
페이지를 이동하려면Link를 사용하면 되는데to로 이동하고자 하는 경로를 입력하면 된다.
map 함수
자바스크립트 배열에서 반복되는 요소를 처리할 때
map함수를 사용한다.
map함수는 배열의 요소를 각각 탐색한다.
다음은 예제이다.const fruits = ["apple", "kiwi", "banana", "orange"] fruits.map((v, i) => { console.log(`${i + 1}번째 과일은 ${v}입니다.`); });일 때 v는 value, i는 index를 나타낸다.
