리액트 문법 공부

1. 터미널에 create-react-app

리액트 문법(JSX)

1. 속성 className 사용 !
2. Tag 감싸주기 !
3. 중괄호{ } 사용
4. 엘리먼트 첫 대문자 사용 !
5. if 문 ⇒ 삼항연산자 사용
6. map함수에선 key 속성 넣기!
7. SPA (single page application) : 페이지를 전체 html로 가져오는 것이 아닌 필요한 데이터만 가져올 수 있어 재활용적 측면에 좋다. 하지만 SEO 검색엔진이나 첫로딩이 길다라는 단점이 있다.

리액트 Router

1.라우팅 : 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다." ex. 마이페이지, 알림 등

1. ‘React Router’ 라는 라이브러리 사용을 해야한다.
2. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch 와 Route, 그리고 경로를 변경하는 역할을 하는 Link 입니다.
3. 실행방법 (터미널)

npx create-react-app simpleroute
cd simpleroute
npm start

npm install react-router-dom@5.3.0
# 이번 스프린트에서는 5.3.0 버전을 사용합니다

스터디진행

1. npm install react-router-dom@5.3.0 설치
2. import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

import 구문을 입력으로 BrowserRouter, Route, Switch, Link 컴포넌트불러오기

1. BrowserRouter → switch → Route 감싸기

{/ TODO - Switch와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. /}

Props vs State

Props는 외부에서 전달받은 값,props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체 ex) 성별, 이름 등

<Child text={"I'm the eldest child"} /> → 값할당 하는법 중괄호 !

State는 내부에서 변화하는 값 ex) 취업여부, 결혼여부, 나이 등

useState함수 사용법 :

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

수도코드

1. 큰개념을 먼저 읽자
2. 수도코드로 진행하는 법 익히기
3. 그 다음에 코드 작성